css實現水平對齊，如圖

有人會說css實現這種水平對齊要兼容ie8還不簡單嗎？使用float: left，或者display: inline-block，不就可以了嗎？是的，最常用的最簡單方式就是上面這兩種，但還有一種方式也可以實現，那就是使用display: table-cell;

示例代碼

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}

.container{

width: 1000px;

height: 1000px;

margin: 100px;

background-color: #f60;

}

.left{

/*關鍵點在于將兩個元素設置為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;

/*即使寬度設為2000px，元素的內容還是可以正常顯示*/

width: 2000px;

height: 600px;

background-color: #f10;

}

leftright

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的html中两个标签上对齐,css将两个元素水平对齐的方法(兼容IE8)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。