文本与其他元素（图片等）顶对齐

描述

经常会遇到文本与其他元素同行显示顶对齐的情况，
比如文本与图片，
比如文本与包含各种元素的div元素等。

解决方式

方式一 float

将文本与要对齐的元素都进行浮动即可。

方式二

将要对齐的元素设置成行内块元素，再设置文字顶对齐。

display: inline-block;
vertical-align:text-top;

vertical-align

• middle: 把此元素放置在父元素的中部。
• top: 把元素的顶端与行中最高元素的顶端对齐。
• bottom: 把元素的顶端与行中最低的元素的顶端对齐。
• text-top: 把元素的顶端与父元素字体的顶端对齐。
• text-bottom: 把元素的底端与父元素字体的底端对齐。
• super: 垂直对齐文本的上标。
• sub: 垂直对齐文本的下标。
• baseline: 默认。元素放置在父元素的基线上。

网站导航

网站导航