15. 居中

时间：2018-05-16 00:32:16 阅读：188 评论：0 收藏：0 [点我收藏+]

标签：sans center absolute imp 插入 base orm ott web

参考文章：http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651552468&idx=1&sn=b6bbd09de4a3af03e4f0e0ed48364539&chksm=8025ad15b7522403a1f9105f18178b1be832d95ac11081129287e149405ff777616a94c0858e&scene=0#rd

水平居中设置

内联元素

文本、图片等内联元素
1
<div style="text-align:center;">我是文本,我想要居中显示</div>

块级元素

定宽

块元素或 display:block; 且要指定宽度；
1
<div style="width:500px;margin:0 auto;">我是定宽块状元素，我要水平居中显示</div>

不定宽

比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。不定宽度的块状元素有三种方法居中：

加入 table 标签

为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
为这个 table 设置 margin:0 auto;（这个和定宽块状元素的方法一样），这种方式，低版本的IE可能不认识，html 第一行需要加入dtd头，如下：

不过自己目前使用 <!DOCTYPE html> 也解决了。

设置 display:inline 转化为内联元素

改变块级元素的 display:inline 类型，然后父级使用 text-align:center 来实现居中效果。

1

2

3

4

5

<div style="text-align:center;">
    <ul style="list-style:none;margin:0;padding:0;display:inline;">
        <li style="margin-right:8px;display:inline;"><a href="#">1</a></li>
    </ul>
</div>

这种方法相比第一种方法的优势是不用增加无语义标签，简化了标签的嵌套深度，但也存在着一些问题：它将块状元素的 display:inline，变成了行内元素，所以少了一些功能，比如设定长度值。

设置 position:relative 和 left:50%;

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。

使用 left: 450px;需配合 position 使用，否则没效果. 但是这样写，在窗口大小改变时容易变形，所以使用 margin: 0 auto;

垂直居中

父元素高度确定的单行文本，通过设置父元素的 height 和 line-height 高度一致来实现的。如下代码：
1
<div style="height:100px;line-height:100px;background:#999;">hi,imooc!</div>
父元素高度确定的多行文本

方法一：使用插入 table(包括tbody、tr、td)标签，同时设置 vertical-align：middle

说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以又要插入 table 标签了。
1
2
3
4
5
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>

方法二：在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display:table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。

1

2

3

4

5

6

<div style="height:300px;display:table-cell;vartical-align:middle;">
    <div>
        <p>看我是否可以居中</p>
        <p>看我是否可以居中</p>
    </div>
</div>

隐性改变display类型

当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：position : absolute 或者 float浮动
元素会自动变为以 display:inline-block，当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。
a 标签是行内元素，所以设置它的 width 是没有效果的，但是设置为 position:absolute 以后，就可以了。
1
2
3
<div>
<a href="#" style="position:absolute;width:200px;background:#ccc;">进入课程</a>
</div>

sj1

2018年5月15日 23:33:55

15. 居中

标签：sans center absolute imp 插入 base orm ott web

原文地址：https://www.cnblogs.com/lhsaq2009/p/9043592.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行