CSS 水平居中

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

<nav>
  <href="">链接元素01</a>
  <href="">链接元素02</a>
  <href="">链接元素03</a>
</nav> 
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>
<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;
}

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。