来自https://jingyan.baidu.com/article/3c343ff7f22c930d377963b5.html,感谢作者的无私分享。
网页中元素如何设为水平居中,其中水平居中又针对不同元素,居中的方式不同。如果设置元素为文本、图片等内联元素(又称行内元素)时,水平居中是通过给父元素设置 text-align:center 来实现的;如果设置元素是块状元素,此时块状又分为定宽块状元素和不定宽块状元素,此时设置居中需要看下文了,哈哈
工具/原料
-
sublimeText3
1.“内联元素”的“水平”居中
-
内联元素又称行内元素,常见元素有:<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>,此类元素是通过给父类元素设置text-align:center 来实现。
-
在<style>中加入CSS样式
<style type="text/css">
p{
text-align: center;
}
</style>
2.1“定宽块状元素”的“水平”居中
-
常见块状元素有:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>,此类元素是通过通过设置“左右margin”值为“auto”来实现居中的来实现。
-
在<style>中加入CSS样式
<style type="text/css">
div{
width:100px;/*定宽*/
margin: 10px auto;
}
</style>
2.2“不定宽块状元素”的“水平”居中
-
块状元素此时没有给他设置宽度,那么他居中有三种方式,1.table标签包裹然后设置margin。
-
.将块元素变成内联元素,然后给父类元素设置text-align:center 来实现。
-
利用position:relative向左 偏移left:x%(其中xs视具体情况而定).