標籤：底部 ora 並且 ott 高度 使用情境 inline height vertica
## CSS2 vertical-align 垂直對齊
- baseline 預設值.基於基準對齊
- middle 位於同一行的非襯線字型小寫字母的 1/2 處.不要為父元素設定高度和行高
- top 位於父元素一行的頂部
- bottom 位於父元素一行的底部
- text-top 位於同一行的文本的頂部
- text-bottom 位於同一行的文本的底部
- super 位於同一行的sub元素文本的基準對齊 <sup>上角標</sup>
- sub 位於同一行的sub元素文本的基準對齊 <sub>下角標</sub>
- 使用 vertical-align 在一行內，行內元素在垂直方向的對齊位置。
- vertical-align: 只能設定行內元素（inline inline-block)
#### 垂直置中對齊
vertical-align: middle;
text-align: center;
#### vertical-align 使用情境1： 一行內的垂直方向對齊
#### vertical-align 使用情境2： 多行內的垂直方向對齊
1. 為要垂直置中的子項目設定 ````vertical-align:middle````樣式
2. 為該元素的父元素設定````display: table-cell````,並設定固定的高度
3. 然後再設定 ````vertical-align:middle````和水平對齊````text-align: center````
4. 當其元素設定為 ````display: table-cell````.並且寬度清零時，需要為父元素添加display: table;，並設定寬度100%
**可以把元素的所有內容（文本，子項目-inline, inline-block）都在垂直方向置中**
**在局部布局中使用display:table-cell;以減少對整體布局的影響**
<style type="text/css">
/*指定塊元素圖片垂直置中*/
.box-table{
display: table;
width:100%;
}
.box {
background-color: orange;
height: 200px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img{
width: 100px;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div class="box-table">
<div class="box">
<img src="img/bg.jpg" >
</div>
</div>
</body>
css2--垂直對齊
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
