CSS 水平居中

时间：2014-10-12 13:05:57 阅读：231 评论：0 收藏：0 [点我收藏+]

标签：style blog color io 使用 ar strong sp div

水平居中：行内元素解决方案

居中元素：文字、链接以及其它行内元素（inline或inline-*类型的元素，如inline-block，inline-table，inline-flex）
解决方案：将inline元素包裹在一个display属性为block的父级元素中，如div、nav，设置父级元素属性text-align:center属性即可。

HTML

CSS

nav, div{
text-align: center;
}

水平居中：块状元素解决方案
居中元素：块状元素，如div，p，section等元素，即display属性为block的元素
解决方案：添加margin-left，margin-right属性值为auto即可，如：margin:0 auto;
注意：需要居中的块状元素需有固定的宽度，否则无法实现居中，因为占据100%的宽度。

HTML

<div class="center">水平居中的块状元素</div>
<p class="center">水平居中的块状元素</p>

CSS

div, p{
    width: 200px;  /*需要设置元素的宽度值*/
    height: 150px;
color:#fff;
background: #222;
}
.center {
    margin: 10px auto;
}

水平居中：多个块状元素的解决方案
居中元素：“多个块状元素”水平横向排列居中
解决方案：设置这几个块状元素的display属性为inline-block，并且设置父元素的text-align属性为center即可。
注意：如果要实现这几个块状元素的垂直居中，使用上一节中的margin:0 auto属性即可。

HTML

<div class="center">水平居中的块状元素</div>
<div class="center">水平居中的块状元素</div>

CSS

body {
    text-align: center;
}
/*页面美化元素*/
div {
    width: 100px;
    padding: 10px;
    height: 50px;
    background-color: #222;
    color: #fff;
}
.center {
    display: inline-block;
}

水平居中：多个块状元素解决方案（使用flex布局实现）
居中元素：多个块状元素水平横向排列居中（使用flex布局实现）
解决方案：将多个块状元素的父级元素的display属性设置为flex，并设置justify-content:center即可。
HTML

<div class="center">水平居中的块状元素</div>
<div class="center">水平居中的块状元素</div>

CSS

body {
    display: flex;
    justify-content: center;
}

/*页面美化元素*/
div{
    width: 100px;
    height: 50px;
    color:#fff;
    background: #222;
    margin: 10px;
    padding: 10px;
}

CSS 水平居中

标签：style blog color io 使用 ar strong sp div

原文地址：http://www.cnblogs.com/sun-mile-rain/p/4020246.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)

周排行