水平居中设置
在实际工作中,我们经常会遇到需要设置水平居中的场景。例如,为了美观,文章的标题通常显示在水平居中。
这里我们分为两种情况:行内元素: 还是 块状元素 ,块状元素分为定宽块状元素和不定宽块状元素。今天我们来看看。
行内元素
如果将元素设置为文本、图片和其他行业元素,则通过设置父元素进行水平居中 text-align:center 来实现的。
定宽块状元素
当设置元素为 块状元素 时用 text-align:center 不起作用,此时也分为两种情况:定宽块状元素和不定宽块状元素。
若为定宽块状元素。(定宽块状元素:块状元素的宽度width=\”360px\”,height=\”auto\” />
通过设置左右来满足定宽和块状两个条件margin”值为“auto实现居中。
不定宽块状元素
有三种方法可以使用不定宽度的块状元素(这三种方法目前被广泛使用):
加入 table 标签设置 display: inline 方法:与第一种类似,显示类型设置为 行内元素设置不定宽元素的属性 position:relative 和 left:50%:利用 相对定位 该方法将元素向左偏移 50% ,也就是达到居中的目的
第一种方法:
为什么选择方法一加入?table标签? 是利用table标签的长度自适应性——即不定义其长度或默认父元素body的长度(table它的长度取决于它的文本长度),所以它可以被视为一个固定宽度块元素,然后使用固定宽度块margin使其水平居中的方法。
第一步:在需要设置的中间元素外添加一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
第二步:为此 table 设置“左右 margin 居中(这与定宽块状元素的方法相同)。
举例如下:
html代码:
<div>\ <table>\ <tbody>\ <tr><td>\ <ul>\ <li>我是第一行文本</li>\ <li>我是第二行文本</li>\ <li>我是第三行文本</li>\ </ul>\ </td></tr>\ </tbody>\ </table>\</div>\
css代码:
<style>\table{\ border:1px solid;\ margin:0 auto;\}\</style>\
第二种方法:
改变块级元素 display 为 inline 类型(设置为 行内元素 显示),然后使用 text-align:center 实现居中效果。以下例子:
html代码:
<body>\<div class=\”container\”>\ <ul>\ <li><a href=\”#\”>1</a></li>\ <li><a href=\”#\”>2</a></li>\ <li><a href=\”#\”>3</a></li>\ </ul>\</div>\</body>\
css代码:
<style>\.container{\ text-align:center;\}\/* margin:0;padding:消除文本和div边框间隙)*/\.container ul{\ list-style:none;\ margin:0;\ padding:0;\ display:inline;\}\/* margin-right:8px(设置li文本之间的间隔)*/\.container li{\ margin-right:8px;\ display:inline;\}\</style>\
与第一种方法相比,这种方法的优点是不需要添加无语义标签,但也存在一些问题:它使块状元素 display 类型改为 inline,它已经成为行业元素,因此功能较少,如设定长度值。
方法三:
设置父元素 float,然后设置父元素 position:relative 和 left:子元素设置50% position:relative 和 left: -50% 实现水平居中。
我们可以这样理解:假设ul层层的父层(即下面例子中的父层)div中间有条平分线ul层的父层(div层)平均分为两份,ul层的css代码是将ul层的最左端和ul层的父层(div层)平分线对齐;和li层的css代码则是将li层的平分线与ul层的最左端(也是div层的平分线)对齐,实现li层的居中。
代码如下:
<body>\<div class=\”container\”>\ <ul>\ <li><a href=\”#\”>1</a></li>\ <li><a href=\”#\”>2</a></li>\ <li><a href=\”#\”>3</a></li>\ </ul>\</div>\</body>\
css代码:
<style>\.container{\ float:left;\ position:relative;\ left:50%\}\.container ul{\ list-style:none;\ margin:0;\ padding:0;\ \ position:relative;\ left:-50%;\}\.container li{float:left;display:inline;margin-right:8px;}\</style>\
这三种方法应用广泛,各有优缺点。具体选择哪种方法取决于具体情况。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至827202335@qq.com 举报,一经查实,本站将立刻删除。文章链接:https://www.eztwang.com/dongtai/65315.html