css怎麼設定水平對齊
- 青灯夜游原創
- 2021-02-23 17:13:0910050瀏覽
css設定水平對齊的方法：1、使用「text-align: center;」樣式設定文字元素水平居中對齊；2、使用「margin: auto;」樣式設定區塊狀元素水平居中對齊。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
1、使用text-align: center;
#text-align屬性指定元素文字的水平對齊方式。
屬性值：
left 把文字排列到左邊。預設值：由瀏覽器決定。
right 把文字排列到右邊。
center 把文字排列到中間。
justify 實現兩端對齊文字效果。
範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.center {
text-align: center;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>文本居中对齐</h2>
<div class="center">
<p>文本居中对齐。</p>
</div>
</body>
</html>效果圖：
【推薦教學：CSS影片教學 】
2、使用margin: auto;
margin簡寫屬性在一個宣告中設定所有外邊距屬性。
屬性值：
auto 瀏覽器計算外邊距。
length 規定以特定單位計的外邊距值，例如像素、公分等。預設值是 0px。
% 規定基於父元素的寬度的百分比的外邊界。
要水平置中對齊一個元素(如
), 可以使用 margin: auto;。
設定到元素的寬度將防止它溢出到容器的邊緣。
元素透過指定寬度，並將兩邊的空外邊距平均分配
範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>元素居中对齐</h2>
<div class="center">
<p>div 元素是居中的</p>
</div>
</body>
</html>效果圖：
更多程式相關知識，請造訪：程式設計影片！ ！
以上是css怎麼設定水平對齊的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css最大的優點是什麼下一篇：css最大的優點是什麼