1、在html编辑器中,新建一个html文件,例如:index.html。
2、在index.html中的body标签中,填入html代码:
<div style="position: absolutetop: 50%left: 50%height: 10%width: 30%margin: -5% 0 0 -15%">123asfafada</div>
3、最后,浏览器运行index.html,此时html中的文字被成功垂直水平居中显示。
水平居中:
行内元素:可以父级利用text-align: center进行水平居中
块级元素:
①可以利用margin: 0 auto进行水平居中
②使用position决定定位
利用margin-left进行左偏移
利用transform进行左偏移
③使用flex布局
垂直居中:
内联元素:可以使用line-height进行垂直居中
块级元素:
①使用position定位
利用margin-top进行上偏移
利用transform进行上偏移
②使用flex布局
常用的基本就这些,当然还有grid布局,父级设置为table布局,进行设置等方案,这边不做过多赘述。
1、首先我们打开自己的电脑,找到已经安装好的Dreamweaver,新建一个html页面,并保存到桌面上。
2、然后我们在html的编辑窗口,编辑元素,使其中显示若干文字,我是用的div标签进行布局显示的。
3、其在浏览器中的显示效果如下图所示,我们可以很清晰的看到,文字明显的靠上靠左对齐。
4、接下来我们就需要为文字元素添加一定的对齐方式,首先我们让其居中对齐,即使用text-align:center
5、使用之后在浏览器中进行效果查看,可以很清楚的看到,文字相对于之前靠右对齐了。
6、我们可以从上一个图中看到,文字在垂直方向上还是不对齐的,接下来我们就需要为文字添加垂直对齐样式,line-height,我们需要将这一样式的大小设为文字外层元素的高度大小,这样便可正好垂直居中对齐了。
7、接下来我们刷新浏览器中的页面,查看效果,现在的文字已是垂直水平均居中的状态。
注意事项:line-height的值和height的值要相等。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)