欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS 水平居中_html/css_WEB-ITnose

程序员文章站 2022-06-07 20:54:10
...
水平居中:行内元素解决方案 居中元素:文字、链接以及其它行内元素(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;
}

相关标签: CSS 水平居中