標籤：style blog color 使用 div html line htm
使用vertical-align:middle可以讓行級元素垂直置中，但這個置中是以文字的中線來計算的，而文字的中線在不同的字型上不同，甚至相同的字型在不同的瀏覽器上顯示的都不同。
所以直接使用vertical-align:middle很難完美置中，因此需要其它調整。
<!DOCTYPE html><style>div { border:1px solid red; width:200px; height:100px; line-height:100px; text-align:center;}span {vertical-align:middle;}#box { display:inline-block; width:100px; height:98px; background:#EEE;}</style><div> abc<span id="box"></span>def</div>
當容器記憶體在vertical-align:middle元素時，它們的中線會被對其到所在行的基準上。
而所在行的基準未必是中線，基準與中線偏離的距離就是vertical-align:middle垂直置中時候出現的偏離距離。
基準與中線的位置差異會受到字型、字形、字型大小，等影響。而且在不同瀏覽器上字型的渲染還存在差異，這樣就不容易計算具體的偏差。
但我們可以取消掉基準和中線的位置差，做法是將字型大小改到0，也就是不在行中直接使用文本節點。
<!DOCTYPE html><style>div { border:1px solid red; width:200px; height:100px; line-height:100px; text-align:center; font-size:0px;}span { vertical-align:middle; display:inline-block; font-size:1rem;}#box { width:100px; height:98px; background:#EEE;}</style><div> <span>abc</span><span id="box"></span><span>def</span></div>
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
