文字對齊居中及浮動的幾個注意點和方法
阿新 • • 發佈：2019-02-02
文字居中以及背景圖片設定的幾個方法：
一 居中及對齊
1.margin設定區塊元素水平居中
margin:0 auto;設定左右外邊距的大小，控制元素的水平居中。
<style> .center{ margin: 20px auto; width: 600px; border: 3px solid green; text-align: center; } </style> <body> <div class="center"> <p>使用margin進行元素的居中</p> </div> </body>
注：width不能設定為100%，是沒有效果的。
2.position屬性設定元素的左右對齊
<style> .right{ position: absolute; right: 0; width: 300px; border: 3px solid pink; padding: 10px; z-index: 0; } <style> <body> <div class="right"> <p>我是右對齊的區塊</p> </div> </body> </html>
3.float屬性設定左右對齊
<style>
.right1{
float: right;
width: 300px;
border: 3px solid purple;
padding: 10px;
}
</head>
<body>
<div class="right1">
<p>我是浮動右對齊的區塊</p>
</div>
</body>
</html>
4.padding屬性設定水平垂直居中
<style> .padCenter{ padding: 70px 0; border: 3px dotted yellow; text-align: center; } </style> <body> <div class="padCenter"> <p>我是用padding垂直居中的元素</p> </div> </body> </html>
5.line-height屬性設定水平垂直居中
<style>
.lineCenter{
line-height:300px;
border: 3px solid #33ff33 ;
height: 300px;
}
</style>
<body>
<div class="lineCenter">
<p>我是利用行高進行水平居中的元素</p>
</div>
</body>
</html>
6.絕對定位和transform屬性設定水平垂直居中
<style>
.poCenter{
border: 3px solid #ff88c2;
height: 200px;
position: relative;
}
.poCenter p{
position: absolute;
top: 50%;
left: 50%;
/*對水平垂直居中進行修正*/
transform:translate(-50%,-50%);
}
</style>
<body>
<div class="poCenter">
<p>我是利用絕對定位進行水平垂直居中的元素</p>
</div>
</body>
</html>
浮動的注意點：坍塌問題
1 .在最後一個div中加入樣式<div style="clear:none"></div>清除浮動
2. bfc 在父級元素新增float：left/right等加強邊框
3. .clear{contain"";display:block;說明此區域為塊狀height：0；visibility：hidden；clear：both；}
二 背景圖片設定
background-img：url（）；
background-repeat：no-repeat；/repeat-x/repeat-y
background-position：50% 50%；圖片垂直居中
background-size：cover；//圖片被包裹最適合
background：transparent；//圖片透明
background-attackment:fixed;//圖片固定
文字設定
Text-align:center 文字居中
Text-align:justify 文字左右對齊
Text-indent: 第一行縮排
Text-transform:capitalize 字母首個大寫
Text-decoration:none 超連結字型去掉下劃線
Text-decoration:line-through 橫穿字型線
word-spacing:1px;詞與詞之間間隙
letter-spacing:1px;字與字之間間隙