Pusat CSS, penjajaran mendatar dan menegak-tutorial css-php.cn

Pusat CSS, penjajaran mendatar dan menegak

PHPz

Lepaskan： 2023-09-05 11:21:05

ke hadapan

893 orang telah melayarinya

Kita boleh menyelaraskan elemen atau kandungan di dalamnya dengan menggunakan CSS yang menyediakan pelbagai pilihan untuk penjajaran elemen dan kandungannya secara mendatar, menegak atau di tengah.

Penjajaran Mendatar

Inline-elements
Elemen sebaris atau elemen blok sebaris seperti teks, anchor, span, dll. boleh diselaraskan secara mendatar dengan bantuan teks CSS -align property.
Block-level elements
Block-level elements seperti div, p, dsb. boleh diselaraskan secara mendatar dengan bantuan sifat jidar CSS, tetapi lebar elemen tidak boleh 100% relatif kepada induk kerana ia tidak memerlukan penjajaran.
Unsur peringkat blok menggunakan apungan atau skema kedudukan
Elemen boleh diselaraskan secara mendatar dengan bantuan sifat apungan CSS yang menjajarkan berbilang elemen sama ada ke kiri/kanan dan bukan di tengah atau menggunakan kaedah mutlak skema kedudukan CSS.
#🎜 . 🎜#

##齜🎜###齜🎜#垂盎寜🎜🎜#

内联元素

内联元素或内联块元素，如文本、锚点等，可以通过可以通过heightCSS align-CSS line-garis vertikal进行垂直对齐。

块级元素 CSS 居中、水平和垂直对齐

块级元素，如div、p等，可以S margin〚过过可以通从过行及CSS align-item属性进行垂直对齐，或者使用CSS transform属性的绝对定位方案方法。

示🎜🎜#示🎜🎜#示🎜我们看一个CSS垂直对齐的示例 −#🎜 🎜# 演示

<!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>

Salin selepas log masuk

输出

#🎜 . 🎜## 🎜🎜#我们可以使用上述水平和垂直对齐的方法来将元素居中对齐。

Atas ialah kandungan terperinci Pusat CSS, penjajaran mendatar dan menegak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!