css如何設定對齊

醉折花枝作酒筹原創: 2021-04-20 17:22:537407瀏覽

設定方法：1、使用「margin:0px auto」語句設定水平對齊；2、使用position屬性，配合top、bottom、left和right屬性設定左或右對齊；3、使用「float: right|left」語句設定左或右對齊。

css如何設定對齊

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

1、使用 margin 屬性來水平對齊

可透過將左邊距和右邊距設為「auto」來對齊元素。但前提是必須聲明！ DOCTYPE，否則在IE8是無效的。這樣就可以居中元素了，例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>document</title> 
<style>
div{
    margin: 0px auto;
    width: 70%;
    height: 300px;
    background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

css如何設定對齊

提示：如果寬度是 100%，則對齊沒有效果。

2、使用position 屬性進行左和右對齊

使用這種方法在兼容性這一塊無疑是最好的方法了，但當使用position 屬性時，請始終設定! DOCTYPE 聲明，在IE8 以及更早的版本存在一個問題。如果容器元素（在我們的案例中是

）設定了指定的寬度，並且省略了!DOCTYPE 聲明，那麼IE8 以及更早的版本會在右側增加17px 的外邊距。例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>document</title> 
<style>
body{
    margin: 0;
    padding: 0;
}
.container{
    position: relative;
    width: 100%;
}
.right{
    position: absolute;
    right: 0px;
    width: 300px;
    height: 50px;
    background-color: red;
}
</style>
</head>
<body>
<div class="container">
    <div class="right"></div>
</div>
</body>
</html>

3、使用 float 屬性來進行左和右對齊

當使用 float 屬性時，IE8 以及更早的版本存在一個問題。如果省略 !DOCTYPE 聲明，那麼 IE8 以及更早的版本會在右側增加 17px 的外邊距。這似乎是為滾動條預留的空間。當使用 float 屬性時，請始終設定 !DOCTYPE 宣告：例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>document</title> 
<style>
body{
    margin: 0;
    padding: 0;
}

.right{
    float: right;
    width: 300px;
    height: 50px;
    background-color: red;
}
</style>
</head>
<body>
<div class="container">
    <div class="right"></div>
</div>
</body>
</html>

css如何設定對齊

推薦學習：css影片教學

以上是css如何設定對齊的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 css css3 Float auto class 外边距 position margin

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css怎麼把文字居中下一篇：css怎麼把文字居中

看更多