CSS Align(penjajaran)
CSS Jajaran Mendatar
Dalam CSS, terdapat beberapa sifat untuk penjajaran mendatar unsur.
Penjajaran elemen blok
Elemen blok ialah elemen yang menempati lebar penuh dan dikelilingi oleh pemisah baris. Contoh
elemen blok:
<h1>
<p>
<div>
Penjajaran teks, sila rujuk bab Teks CSS. .
Dalam bab ini, kami akan memberitahu anda cara menjajarkan elemen blok secara mendatar dalam reka letak.
Penjajaran tengah, gunakan atribut jidar
elemen blok untuk menetapkan jidar kiri dan kanan kepada penjajaran "automatik".
Nota: Menggunakan atribut margin:auto dalam IE8 tidak berfungsi dengan betul melainkan diisytiharkan !DOCTYPE
Atribut jidar boleh dibahagikan secara sewenang-wenangnya kepada tetapan jidar kiri dan kanan dan ditentukan secara automatik Hasilnya ialah elemen berpusat:
Contoh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="center">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
<p><b>注意: </b>使用 margin:auto无法兼容 IE8, 除非!DOCTYPE已经声明.</p>
</body>
</html>. Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Petua: Jika lebar adalah 100%, Penjajaran tidak mempunyai kesan.
Nota: Terdapat pepijat pemprosesan margin untuk elemen blok dalam IE5. Agar contoh di atas berfungsi dalam IE5, beberapa kod tambahan perlu ditambah. Contoh
Gunakan atribut kedudukan untuk menetapkan penjajaran kiri dan kanan
Salah satu cara untuk menjajarkan elemen ialah menggunakan kedudukan mutlak:
Contoh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
</body>
</html>Jalankan contoh»
Klik butang "Jalankan contoh" untuk melihat contoh dalam talian
Nota: Kedudukan mutlak dan dokumentasi Bebas Aliran, supaya mereka boleh menindan elemen lain pada halaman.
Gunakan atribut apungan untuk menetapkan penjajaran kiri dan kanan
Menggunakan atribut apungan ialah salah satu cara untuk menjajarkan elemen:
Contoh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
</body>
</html>Jalankan contoh»
Klik butang "Jalankan contoh" untuk melihat contoh dalam talian
Gunakan Padding untuk menetapkan menegak penjajaran tengah
Cara mudah untuk menetapkan penjajaran tengah menegak dalam CSS ialah menggunakan pelapik:
saya berpusat secara menegak.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>垂直居中</h2>
<p>以上实例，我们使用 padding 属性实现元素的垂直居中：</p>
<div class="center">
<p>我是垂直居中的。</p>
</div>
</body>
</html>Jalankan instance?
Klik butang "Run Instance" untuk melihat dalam talian contoh
Jika anda ingin memusatkan kedua-dua secara mendatar dan menegak, anda boleh menggunakan padding dan text-align: center:
Saya berpusat secara mendatar dan menegak.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
</style>
</head>
<body>
<h2>Centering</h2>
<p>以下实例，我们使用 padding 和 text-align 让 div 元素的水平和垂直方向都居中:</p>
<div class="center">
<p>我是水平和垂直都居中的。</p>
</div>
</body>
</html>Jalankan instance?
Klik butang "Run Instance" untuk melihat dalam talian contoh
Gunakan ketinggian garis untuk menetapkan pemusatan menegak
Saya berpusat secara menegak.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<h2>居中</h2>
<p>以下实例中，我们让 line-height 属性值和 height 属性值相等来设置 div 元素居中：</p>
<div class="center">
<p>我是垂直居中的。</p>
</div>
</body>
</html>Jalankan instance?
Klik butang "Run Instance" untuk melihat dalam talian instance
Gunakan kedudukan dan ubah untuk menetapkan pemusatan menegak
Selain menggunakan padding dan atribut ketinggian garis, kita juga boleh menggunakan atribut transform Untuk menetapkan pemusatan menegak:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>居中</h2>
<p>以下实例中，我们使用了 positioning 和 transform 属性来设置水平和垂直居中：</p>
<div class="center">
<p>我是水平和垂直居中的。</p>
</div>
<p>注意: IE8 及更早版本不支持 transform 属性。</p>
</body>
</html>Jalankan instance?
Klik Butang "Jalankan Instance" untuk melihat contoh dalam talian
Petua: Untuk lebih banyak kandungan atribut transform, sila rujuk bab flip 2D.
Isu Keserasian Pelayar Silang
Apabila menjajarkan elemen seperti ini, adalah idea yang baik untuk menentukan terlebih dahulu jidar dan pelapik elemen. Ini adalah untuk mengelakkan perbezaan visual dalam pelayar yang berbeza.
IE8 dan lebih awal mempunyai masalah apabila menggunakan atribut apungan. Jika elemen kontena (dalam kes ini <div class="container">) mempunyai lebar yang ditentukan dan pengisytiharan !DOCTYPE tiada, IE8 dan versi terdahulu akan menambah margin 17px ke kanan. Ini nampaknya ruang simpanan yang menatal. Apabila menggunakan atribut apungan, sentiasa tetapkan dalam pengisytiharan DOCTYPE!
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p><b>注意: </b>当使用浮动属性对齐,总是包括!DOCTYPE声明!如果丢失,它将会在IE浏览器产生奇怪的结果。</p>
</div>
</body>
</html>Run instance »
Klik butang "Run Instance" untuk melihat instance dalam talian
