描述
經(jīng)常會遇到文本與其他元素同行顯示頂對齊的情況,
比如文本與圖片,
比如文本與包含各種元素的div
元素等。
解決方式
方式一 float
將文本與要對齊的元素都進行浮動即可。
方式二
將要對齊的元素設(shè)置成行內(nèi)塊元素,再設(shè)置文字頂對齊。
display: inline-block;
vertical-align:text-top;
vertical-align
- middle: 把此元素放置在父元素的中部。
- top: 把元素的頂端與行中最高元素的頂端對齊。
- bottom: 把元素的頂端與行中最低的元素的頂端對齊。
- text-top: 把元素的頂端與父元素字體的頂端對齊。
- text-bottom: 把元素的底端與父元素字體的底端對齊。
- super: 垂直對齊文本的上標。
- sub: 垂直對齊文本的下標。
- baseline: 默認。元素放置在父元素的基線上。