html元素水平居中


转载的:http://www.voidcn.com/article/p-wmdxyijd-bpm.html

一、行内元素水平居中

方法:如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。

如下:

<body>
<div class="center"><span>行内元素在父容器中水平居中显示。</span></div>
</body>
<style>
div{
    border:1px solid ;
    margin:20px;
}
.center{
    text-align:center;
}
</style>

二、块状元素水平居中

当被设置元素为块状元素时,text-align:center 就不起作用了,此时分两种情况:定宽块状元素和不定宽块状元素。

1、定宽块状元素(块状元素的宽度width为固定值)

方法:满足定宽和块状两个条件的元素可以通过设置“左右margin”值为“auto”来实现居中

如下:

<body>
<div>定宽块状元素水平居中。</div>
</body>
<style>
div{
    border:1px solid red;
    margin:20px auto;
    width:200px;/*宽度为固定值,不能写百分比*/
}
</style>

2、块状不定宽元素

方法:

①设置 margin:0 auto;  display:table;

②设置display:inline方法。改变块级元素的display为inline类型(设置为行内元素显示),然后使用text-align:center来实现居中效果

③设置position:relative;left:50%,利用相对定位的方式,将元素向左偏移50%。通过给父元素设置float,然后给父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现水平居中

方法①如下:

<div class="wrap">
  不定宽块状元素水平居中  
</div>
.wrap{
    background:#ccc;
    margin:0 auto;
    display:table;
}

方法②如下:

<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>

<style>
.container{text-align:center;}
.container ul{list-style:none;margin:0;padding:0;display:inline;}
.container li{margin-right:8px;display:inline;}
</style>

方法③如下:

<div class="wrap">
    <div class="wrap-center">不定宽块状元素水平居中。</div>
</div>
.wrap-center{
    background:#ccc;
    position:relative;
    left:-50%;
    
}
.wrap{
    float:left;
    position:relative;
    left:50%;
    
}

免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2020 CODEPRJ.COM