简介

在写项目过程中常常会遇到 文字跟图片一行显示，对于老手来说很简单，但对于新手、样式已经忘记的人，来说很痛苦，

没事，有我在，我帮大家总结些简单的一些需求吧

实现

效果实现只需两行代码：

文字：display: inline-block

图片：vertical-align:middle / 或者用下面的属性值， 按需求来定

拓展

vertical-align 属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>图片</title> 
<style>
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>

<body>
<p>一个<img src="logo.png" width="270" height="50" />默认对齐的图像。</p> 
<p>一个<img class="top" src="logo.png" width="270" height="50" />  text-top 对齐的图像。</p> 
<p>一个<img class="bottom" src="logo.png" width="270" height="50" /> text-bottom 对齐的图像。</p>
</body>
</html>

效果图

编辑

属性值

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	使元素及其后代元素的底部与整行的底部对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length	将元素升高或降低指定的高度，可以是负数。
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

display: inline-block 属性

（1）display: inline-block：转换为行内块元素

img标签，input 以及 td 都是行内块元素

（2）display: block ：行内元素转换为块元素

常见的块元素：h1~h6，p，div，ul，ol，li

特点：独占一行；

宽度默认是容器（父级）的100%

注意点：文字类的元素不能放块级元素，比如 p，h1~h6；标签主要用于存放文字，因此里面不能放块级元素，特别是不能放 div

（3）display: inline：块元素转换为行内元素

常见的行内元素有<a>、、、、、<del>、<s>、<ins>、、等

特点：一行显示多个，默认宽度就是本身内容的宽度；

行内元素只能容纳文本或其他行内元素。

注意点：链接里面不能套链接；

特殊情况下 a链接里面可以放块级元素，前提是要把 a链接转换为块级元素

图片跟文字一行显示

简介

实现

拓展

vertical-align 属性

属性值

display: inline-block 属性