CSS几种水平居中方法

最新推荐文章于 2024-09-02 08:00:00 发布

呵呵后

最新推荐文章于 2024-09-02 08:00:00 发布

阅读量1k

点赞数

分类专栏： HTML&CSS

本文链接：https://blog.csdn.net/oHeHeHou/article/details/52820794

版权

HTML&CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

基础概念

行内元素：又叫内联元素，英文是inline。<span>、<a>、<label>、 <strong> 和<em> 都是。块状元素也可以通过代码display:inline将元素设置为内联元素。
- 特点：
  - 和其他元素都在一行上；
  - 元素的高度、宽度及顶部和底部边距不可设置；
  - 元素的宽度就是它包含的文字或图片的宽度，不可改变。
块状元素：<div>、 <p>、<h1>、<form>、<ul> 和 <li> 都是。
- 特点：
  - 每个块级元素都从新的一行开始，并且其后的元素也另起一行。
  - 元素的高度、宽度、行高以及顶和底边距都可设置。
  - 元素宽度在不设置的情况下，和它父元素的宽度一致）。
- 分类：
  - 定宽块状元素
  - 不定宽块状元素

行内元素的水平居中

给父元素设置text-align:center 即可。

<div style="text-align:center;">我想要在父容器中水平居中显示。</div>

定宽块状元素的水平居中

设置左右margin值为auto即可。

<div style="width:200px;margin:20px auto;";>我是定宽块状元素，我要水平居中显示。</div>

不定宽块状元素的水平居中

不定宽块状元素的水平居中有3种方法：

方法一.加入 table 标签

为需要设置的居中的元素外面加入一个 table 标签，包括 <tbody>、<tr>、<td>,这样,元素变为了一个定宽块状元素。
为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

<body>
<table style="margin:0 auto;">
  <tbody>
    <tr><td>
    <div>我是需要剧中的文本</div>
    </td></tr>
  </tbody>
</table>
</body>

注意：这里<body> 不可以指定长度。

方法二.使用display:inline; 将其改变为行内元素，再设置居中。

<style>
.container{text-align:center;}
.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>

方法三.给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50%。

.wrap {
    position:relative;
    float:left;
    left:50%;
}
.wrap-center{
    position:relative;
    float:left;
    left:-50%;
}

<div class="wrap">
    <div class="wrap-center">我是需要居中的元素。</div>
</div>

参考资料:
http://www.imooc.com/code/6365