CSS中怎么设置元素水平垂直居中？-外链论坛

9q13nh 发表于 2024-6-30 06:10:55

CSS中怎么设置元素水平垂直居中？

记录怎么运用text-align与vertical-align属性设置元素在容器中垂直居中对齐。
text-align与vertical-align虽然都是设置元素内部对齐方式的，但两者的用法还是有略微区别的。
在讨论这两者的用法之前，咱们首要必须认识元素的归类。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-cde008d4c42af51ef129f6ad4aa3e287_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
块元素：独霸一行、可设宽高、标准盒模型、通常当容器运用。
内联元素：多个元素是排在一行的，当它遇到边缘或换行符时才会换行，它的宽高咱们是定义不了的，它随内容变化。
内联块元素：既有块元素特点，又有内联元素特点。
text-align是设置元素中文字的水平对齐方式。
它的功效对象是文本，掌控文本，对块状元素等不生效果，只能让块元素里的内容(例如p标签内的文字：让文字在p标签内居中)相对块元素居中
vertical-align是设置元素的垂直对齐方式。
它的功效对象是元素；它只能功效于内联或内联块元素。该属性相对基线去进行对齐的，介绍一下基线，上图：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-901beef93dcde10100fe01ce597ab22e_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
亦便是说基线是在元素中间靠下的位置的，而运用vertical-align属性的时候，由于它定义内联元素本身的基线与它所在行的基线做相应对齐的，因此在设置元素相对父元素垂直居中对齐的时候，倘若在父元素中仅有它一个元素，是没办法在父元素中进行垂直居中对齐的。此时就必须一个标尺（既同级元素），让它相针对标尺对齐来达到居中效果。
怎样设置一个元素在父元素中水平垂直居中：
1.给它的父元素写text-align属性；
2.要居中的元素将其类型转为inline-block；
3.要居中的元素加vertical-align属性；
4.添加一个“标尺”，既同级元素（span等），要居中的元素与其互相垂直居中
重视在编辑时标尺与必须居中的元素之间不可有空格回车；
标尺须加：
display：inline-block；
width：0；(目的是隐匿标尺)
height：100%(与父元素等高，中线位置既是居中位置)；
vertical-align：middle；
例如：让div1-1在div1水平垂直对齐，加上背景颜色以便区分。
<div style="color: black; text-align: left; margin-bottom: 10px;"><div class="div1">div1
 <div class="div1-1">div2</div><span></span>
 </div>
</div>
CSS部分：
<div style="color: black; text-align: left; margin-bottom: 10px;">*{
 margin: 0;
 padding: 0;
 }
 .div1{
 width: 200px;
 height: 150px;
 bac公斤round: blue;
 margin: 20px 20px;
 text-align: center;
 }
 .div1-1{
 width: 100px;
 height: 100px;
 bac公斤round: red;
 display: inline-block;
 vertical-align: middle;
 }
 .div1 span{
 display: inline-block;
 width: 0px;
 height: 100%;
 bac公斤round: #0681D0;
 vertical-align: middle;
 }</div>
结果图：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-b2d569166201496c6c32b647e4424bf0_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>

vixf 发表于 2024-8-26 21:45:42

我深感你的理解与共鸣，愿对话长流。

情迷布拉格 发表于 2024-8-31 01:40:49

我深受你的启发，你的话语是我前进的动力。

b1gc8v 发表于 2024-10-14 18:37:46

你的话语如春风拂面，温暖了我的心房，真的很感谢。

页: [1]

外链论坛's Archiver

CSS中怎么设置元素水平垂直居中？