CSS 如何实现垂直居中图片弹窗的效果?

html-css08

CSS 如何实现垂直居中图片弹窗的效果?,第1张

在一个容器里再定义一个绝对定位的p容器,再在p容器里放需要垂直居中的图片,图片定义相对定位的CSS。直接上CSS代码:#pic{width:300pxheight:300pxbackground-color:greenborder:6pxsolid#ccctext-align:centerposition:relativedisplay:.

1、打开Dreamweaver cc  2014软件,选择建立html界面,里面自动生成一些必要代码的代码格式,节省时间。

2、在body标签内输入:<div class="one">最喜欢玩游戏</div>;这是图形框的代码,以及要居中的文本内容。

3、在body标签前面位置,输入:

<style>

.one{

width:400pxheight:220pxborder:red solid 1px

}

</style>

5、输入完保存,摁F12键弹出页面,可以看到图框中的文字没有居中。

6、要想文本文字居中,先加上些代码内容。

7、然后增加内容后保存,恩F12键,跳转到页面看效果,即可看到文本居中。