Rumah > Artikel > hujung hadapan web > Pusat CSS, penjajaran mendatar dan menegak

Pusat CSS, penjajaran mendatar dan menegak

PHPzke hadapan: 2023-09-05 11:21:05865semak imbas

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>

输出

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

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

css Float for using Property position margin padding transform flex

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Sifat jejari sempadan-atas-kiri-kiri CSSArtikel seterusnya：Sifat jejari sempadan-atas-kiri-kiri CSS

Artikel berkaitan

Lihat lagi