行內元素對齊：display:inline-block

fou7 發布于2019-08-28 17:59 / 1109人閱讀

摘要：問題描述兩個屬性都是但是一個有內容一個沒有內容為什么會出現高低不平的現象看效果解決方法是給元素添加造成原因是內的元素基線變了

問題描述

兩個div屬性都是display：inline-block;但是一個有內容一個沒有內容為什么會出現高低不平的現象？
看效果~

.div-3, .div-4 {
    display: inline-block;
    width: 100px;
    height: 50px;
    line-height: 50px;
    background: #003366;
    text-align: center;

}
.div-3 a, .div-4 a {
    color: #fff;
}

div-2

.div-1, .div-2 {
    display: inline-block;
    width: 100px;
    height: 50px;
    line-height: 50px;
    background: #003366;
    text-align: center;
    vertical-align: top;
}
.div-1 a, .div-2 a {
    color: #fff;
}

div-1 div-2

解決方法是給inline-block元素添加vertical-align:middle or top or bottom

造成原因是inline-block內的元素基線變了

GPU云服務器云服務器 php 行內元素 html設置行內元素行內控件行內文字

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110937.html

Vertical-Align，你應該知道的一切

摘要：而行內塊元素，顧名思義，就是位于行內的塊元素。紅線表示行高的頂邊和底邊，綠線表示字體高度，藍線表示基線。紅線表示外邊距的邊界，黃色是邊框，綠色的內邊距，藍色是內容區，藍線是每個行內塊元素的基線。現在，我們已經知道了對齊相關的一切要素。好，我們聊聊vertical-align。這個屬性主要目的用于將相鄰的文本與元素對齊。而實際上，verticle-algin可以在不同上下文中靈活地對齊...

Lycheeee 2019-08-29 18:38 評論0 收藏0
前端面試重點之--居中問題

摘要：前端面試重點居中問題在頁面布局開發中，居中問題是我們經常碰到的問題，掌握居中問題對于解決頁面布局非常重要，同時它也是常見的面試重點。已知寬高的元素父元素相對定位，子元素絕對定位。以上才支持的兼容性寫法完前端面試重點——居中問題在頁面布局開發中，居中問題是我們經常碰到的問題，掌握居中問題對于解決頁面布局非常重要，同時它也是常見的面試重點。本文匯總一些常見的居中方式以及一些注意點，權當...

AJie 2019-08-02 15:31 評論0 收藏0
前端面試重點之--居中問題

摘要：前端面試重點居中問題在頁面布局開發中，居中問題是我們經常碰到的問題，掌握居中問題對于解決頁面布局非常重要，同時它也是常見的面試重點。已知寬高的元素父元素相對定位，子元素絕對定位。以上才支持的兼容性寫法完前端面試重點——居中問題在頁面布局開發中，居中問題是我們經常碰到的問題，掌握居中問題對于解決頁面布局非常重要，同時它也是常見的面試重點。本文匯總一些常見的居中方式以及一些注意點，權當...

張遷 2019-08-30 11:23 評論0 收藏0
BFC，包含塊，文檔流，浮動，定位是個啥關系---CSS視覺格式化模型

摘要：視覺格式化模型瀏覽器在解析渲染我們所寫的內容，順序渲染普通文檔流。渲染結果如下圖這兒有一個知識點文檔流按我的理解就是在瀏覽器渲染顯示的一個模式，這個模式的特點自上而下，從左到右排列規則。如果不特殊指定，瀏覽器會默認當前的渲染是按文檔流模式。 CSS視覺格式化模型瀏覽器在解析渲染我們所寫的html內容，順序渲染（普通文檔流）。 1 2 3 4 ...

huashiou 2019-08-30 15:55 評論0 收藏0