css將兩個元素水平對齊的方法(兼容IE8)
發(fā)布時間：2018-09-06 15:19:58 作者：heath_learning 
我要評論
我要評論這篇文章主要介紹了css將兩個元素水平對齊的方法(兼容IE8)的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
css實現(xiàn)水平對齊，如圖
有人會說css實現(xiàn)這種水平對齊要兼容ie8還不簡單嗎？使用float: left，或者display: inline-block，不就可以了嗎？是的，最常用的最簡單方式就是上面這兩種，但還有一種方式也可以實現(xiàn)，那就是使用display: table-cell;
示例代碼
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 1000px;
height: 1000px;
margin: 100px;
background-color: #f60;
}
.left{
/*關(guān)鍵點在于將兩個元素設(shè)置為display：table-cell*/
display: table-cell;
vertical-align: top;
width: 20%;
min-width: 200px;
height: 400px;
background-color: #ccc;
}
.right{
display: table-cell;
vertical-align: top;
/*即使寬度設(shè)為2000px，元素的內(nèi)容還是可以正常顯示*/
width: 2000px;
height: 600px;
background-color: #f10;
}
</style>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 在CSS中可以使用多種屬性來水平對齊元素，不過同時也要考慮一下覽器兼容性問題，感興趣的朋友可以參考下2013-10-28
CSS教程:水平對齊(text-align)-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學網(wǎng)
水平對齊（text-align），用以設(shè)定元素內(nèi)文本的水平對齊方式。 1.語法 text-align具體參數(shù)如下： 語法：text-align:left|right|center|justify 說明：2008-10-17