首页 > 文章 > web前端 > CSS 居中、水平和垂直对齐

CSS 居中、水平和垂直对齐

PHPz转载: 2023-09-05 11:21:05865浏览

我们可以使用 CSS 来对齐元素或其内容，CSS 提供了多种选项用于水平、垂直或居中对齐元素及其内容。

水平对齐

内联元素
内联元素或内联- 块级元素如text、anchor、span等可以借助CSS text-align属性进行水平对齐。
块级元素
块级元素如div、p等可以借助 CSS margin 属性进行水平对齐，但元素的宽度不应该是相对于父元素的 100%，因为这样就不需要对齐。
使用浮动或位置方案的块级元素
元素可以借助CSS浮动属性水平对齐多个元素，该属性将多个元素左/右对齐而不是居中，或者使用CSS定位方案绝对方法。

示例

让我们看一个CSS水平对齐的示例 -

Live演示

<!DOCTYPE html>
<html>
<head>
<title>CSS Horizontal Alignment</title>
<style>
.screen {
   padding: 10px;
   width: 70%;
   margin: 0 auto;
   background-color: #f06d06;
   text-align: center;
   color: white;
   border-radius: 0 0 50px 50px;
   border: 4px solid #000;
}
.seats span, .backSeats div{
   margin: 10px;
   padding: 10px;
   color: white;
   border: 4px solid #000;
}
.seats span{
   width: 120px;
   display: inline-block;
   background-color: #48C9B0;
}
.left{
   text-align: left;
}
.right{
   text-align: right;
}
.center{
   text-align: center;
}
.seats{
   text-align: center;
}
.backSeats div {
   background-color: #dc3545;
}
.leftFloat{
   float: left;
}
.rightAbsolute{
   position: absolute;
   right: 150px;
}
</style>
</head>
<body>
<div class="screen">Screen</div>
<div class="seats">
<span class="left">Adam</span>
<span class="center">Martha</span>
<span class="right">Samantha</span>
<div class="backSeats">
<div class="leftFloat">Premium 1</div>
<div class="leftFloat">Premium 2</div>
<div class="rightAbsolute">Premium 3</div>
</div>
</div>
</body>
</html>

输出

这将产生以下输出 -

CSS 居中、水平和垂直对齐

垂直对齐

内联元素
内联元素或内联块元素，如文本、点等，可以通过CSS填充、 CSS line-height或CSS Vertical-align属性进行垂直对齐。
块级元素
块级元素，如div、p等，可以通过CSS margin属性、CSS flex属性以及CSSalign-items属性进行垂直垂直，或者使用CSS变换属性的绝对定位方案方法。