水平居中對齊在頁面布局中是最為常見的一種布局方式,標題出現(xiàn)較多;下面我們看看常見的四種水平居中對齊方式:
1、 使用margin:0 auto; 進行布局
<style> .content{ width:100px; height:100px; margin:0 auto; background-color:red; }</style><div class="content"></div>2、使用絕對定位布局
<style> .parent{ width:400px; height:200px; border:1px solid #000; position:relative; } .child{ width:100px; height:100px; background-color:red; position:absolute; left:50%; margin-left:-50px; //50為容器寬度的一半 }</style><div class="parent"> <div class="child"></div></div>3、使用text-align:center;和inline-block進行布局
【css設(shè)置字體上下居中 css字體居中對齊怎么做】<style> .parent{ width:400px; height:200px; border:1px solid #000; text-align:center; } .child{ width:100px; height:100px; background-color:red; display:inline-block; }</style><div class="parent"> <div class="child"></div></div>4、使用table進行布局
<style> .parent{ width:400px; height:200px; border:1px solid #000; } .child{ background-color:red; display:table; margin:0 auto; }</style><div class="parent"> <div class="child"></div></div>
以上關(guān)于本文的內(nèi)容,僅作參考!溫馨提示:如遇健康、疾病相關(guān)的問題,請您及時就醫(yī)或請專業(yè)人士給予相關(guān)指導!
「愛刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容,希望對您有所幫助:- 如何下載和安裝方正仿宋簡體字體
- Scrivener設(shè)置自動備份為ZIP文件
- Nomad建模軟件色調(diào)映射設(shè)置教程
- WPS表格自動添加邊框設(shè)置教程
- Excel表格自動換行設(shè)置技巧
- 新如何利用PPT定制幻燈片背景及顏色效果設(shè)置?
- Win7網(wǎng)絡(luò)訪問權(quán)限設(shè)置教程
- 實現(xiàn)連桿的往復運動
- Windows11顯示方向設(shè)置指南
- UG10.0設(shè)置內(nèi)切圓半徑的操作步驟
