描述
经常会遇到文本与其他元素同行显示顶对齐的情况,
比如文本与图片,
比如文本与包含各种元素的div
元素等。
解决方式
方式一 float
将文本与要对齐的元素都进行浮动即可。
方式二
将要对齐的元素设置成行内块元素,再设置文字顶对齐。
display: inline-block;
vertical-align:text-top;
vertical-align
- middle: 把此元素放置在父元素的中部。
- top: 把元素的顶端与行中最高元素的顶端对齐。
- bottom: 把元素的顶端与行中最低的元素的顶端对齐。
- text-top: 把元素的顶端与父元素字体的顶端对齐。
- text-bottom: 把元素的底端与父元素字体的底端对齐。
- super: 垂直对齐文本的上标。
- sub: 垂直对齐文本的下标。
- baseline: 默认。元素放置在父元素的基线上。