> 웹 프론트엔드 > HTML 튜토리얼 > CSS 水平居中_html/css_WEB-ITnose

CSS 水平居中_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:56:34
원래의
931명이 탐색했습니다.

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

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

HTML

文字元素 div >


   链接元素01 a >
   链接元素02 a >
   链接元素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 >
水平居中的块状元素 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 >
水平居中的块状元素 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 >
水平居中的块状元素 div >

CSS 

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

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

 

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿