溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
CSS垂直對齊為什么會不起作用？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！
我們先來分析一下導致垂直對齊無效的原因
我想很多人都會遇到這樣一個問題，在使用vertical-align作為屬性來對齊垂直位置，由于某種原因它根本不起作用！
實際上，vertical-align只能用于“內聯元素”和“表格單元格”。
vertical-align的使用方法
在“內聯元素”或“表格單元格”中描述您想要對齊位置。
如果適用于內部元素的話，“想要改變文字的基本線”。文字的基本線是默認的位置。
這個位置可以提高或降低。
基本上有top，bottom，middle，也可以用像素和%的數字來指定。
如果適用于表單元格，則是“在縱向方向的對齊時”。
我們來看具體的例子：
例如，如果要使用vertical-align實現垂直居中，請看如下代碼。
我們先準備這樣一個盒子
HTML
<div class ="box-wrap">
<div class ="box">
<p>文字內容</p>
</div>
</div>CSS
.box{
background-color: #66b6d5;
width: 300px;
height: 200px;
}
p{
color: #fff;
}效果如下：
然后添加display：table - cell;和vertical - align：middle;到.box。
.box{
display: table-cell;
vertical-align: middle;
background-color: #66b6d5;
width: 300px;
height: 200px;
}
p{
color: #fff;
}效果如下：實現了垂直居中
在這里要注意的是，為了實現垂直方向的位置指定，需要有高度的table。
如果您希望高度取決于父元素，請確保將父元素指定為display：table;并且還要hight。
垂直和對齊，頂部和底部之間的區別也是這樣的。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box-wrapper{
display: table;
height: 200px;
}
.box{
width: 300px;
background-color: #66b6d5;
display: table-cell;
border: 1px #fff solid;
}
.box.middle{
vertical-align: middle;
}
.box.top{
vertical-align: top;
}
.box.bottom{
vertical-align: bottom;
}
p{
color: #fff;
}
</style>
</head>
<body>
<div class="box-wrapper">
<div class="box middle">
<p>文字內容</p>
</div>
<div class="box top">
<p>文字內容</p>
</div>
<div class="box bottom">
<p>文字內容</p>
</div>
</div>
</body>
</html>效果如下：
感謝各位的閱讀！看完上述內容，你們對CSS垂直對齊為什么會不起作用大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
