css display 居中对齐 text-align vertical-align

最新推荐文章于 2024-10-11 15:13:15 发布

puspos

最新推荐文章于 2024-10-11 15:13:15 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/puspos/article/details/111992752

css 专栏收录该内容

11 篇文章

订阅专栏

本文详细探讨了CSS中的display属性，包括block、inline和inline-block三种元素类型，以及如何使用text-align和vertical-align实现元素的水平和垂直居中对齐。通过实例解析了block元素和inline元素的居中方法，特别是使用vertical-align: middle实现行内元素的垂直居中对齐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

display：block 块级元素 div p h form

以新行开始；
高度，行高、外边距和内边距都可控制；
宽度缺省是它的容器的100%
可容纳内联元素和其他块元素

display：inline 内联元素 span label

和其他元素在一行:
高，行高及外边距和内边距不可改变；
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素

display：inline-block 行内块元素 input img

和其他元素在一行
可设置高、行高、外边距内边距

text-align

对block和inline-block元素有效，不适用inline，因为宽度为内容的宽度
水平居中：center

vertical-align

对行内元素有效，可设置inline、inline-block、inline-table、table-cell 元素在垂直方向的上的对齐方式
允许指定负长度值和百分比值

vertical-align：middle 的使用，需要一个兄弟元素做参照物，让它垂直于兄弟元素的中心点。

元素son在父元素father的行内垂直方向居中

在这里插入图片描述

<div class="father">
	<div class="son">xx</div>
</div>

.father {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  text-align: center;/*行内元素水平居中*/
}
.son{
  width: 100px;
  height: 100px;
  background: gray;
  display: inline-block;
  vertical-align: middle;

}
.father:after{/*在行内伪造一个元素，称为middle的靶子*/
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

block元素居中

水平居中

text-align:center;

垂直居中

height:100px; line-height:100px

水平、垂直居中

text-align:center; height:100px; line-height:100px;

inline元素居中

先设置display:inline-block;因为inline不能设置宽高，它们是根据内容决定了，设置为inline-block后，才能设置宽高
display:inline-block; width:100px;height:100px; text-align:center;

水平居中

display:inline-block; width:100px;height:100px; line-height:100px; ### 水平、垂直居中 display:inline-block; width:100px;height:100px; text-align:center; line-height:100px;