水平居中设置

来源：互联网发布：hadoop wordcount源码编辑：程序博客网时间：2024/06/07 06:43

1、水平居中包括行内元素还是块状元素，块状元素里面又分为定宽块状元素，以及不定宽块状元素。

1.1、行内元素的水平居中，像文本、图片等行内元素，水平居中是通过给父元素设置 text-align:center 来实现的。

如下：

<style>div{    border:1px solid red;    margin:20px;}.txtCenter{text-align:center;}.imgCenter{    text-align: center;   }</style></head><body><div class="txtCenter">我想要在父容器中水平居中显示。</div><div class="imgCenter"><img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" /></div></body>

1.2、定长的块级元素居中。（定宽块状元素：块状元素的宽度width为固定值）满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

如下：

<style>div{    border:1px solid red;width:200px;margin:20px auto;}</style></head><body><div>我是定宽块状元素，我要水平居中显示。</div>

1.3、不定宽的块级元素居中。

1.3.1 第一种方式是，使用table标签包裹起来，table标签有自动居中的功能，

如下：两种定义table标签的方式。

<style>table{    margin: 0 auto;}.wrap{    background: #ccc;    /** 设置为table显示也可以实现table标签 */    display: table;     margin: 0 auto;}</style></head><body><div><table>  <tbody>    <tr><td><ul>    <li>我是第一行文本</li>        <li>我是第二行文本</li>        <li>我是第三行文本</li>    </ul>    </td></tr>  </tbody></table></div><div class="wrap">  设置我所在的div容器水平居中  </div>

1.3.2、第二种不定长的块级元素设置居中使用display将块级元素变成行级元素，然后在父元素中设置text-align: center，来实现居中。如下

<style>.container{text-align:center;background: red;}.container ul{list-style:none;margin:0;padding:0;display:inline;}.container li{margin-right:8px;display:inline;}</style></head><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>

1.3.3、第三种不定长的块级元素居中，通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。如下：

<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;}.wrap{    float: left;    position: relative;    left: 50%;}.wrap-center{    background:#ccc;    position: relative;    left: -50%; }</style></head><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><br/><br/><div class="wrap">    <div class="wrap-center">我们来学习一下这种方法。</div></div></body>

阅读全文

0 0

水平居中设置

1、水平居中包括行内元素还是块状元素 ，块状元素里面又分为定宽块状元素，以及不定宽块状元素。

1、水平居中包括行内元素还是块状元素，块状元素里面又分为定宽块状元素，以及不定宽块状元素。