關於圖片與文字在一行顯示時，文字的垂直方向位置的設定
阿新 • • 發佈：2019-01-25
對於img標籤中的verticle-align的屬性值只是為了去除其預設的屬性-baseline,其預設為基線對齊即圖片底層對齊，只要將其屬性值設為其他值，就可以對文字進行豎直方向的
位置設定，一般設定其line-height屬性，（在這之前要對行屬性標籤轉為在一行顯示的塊屬性，即例子中的display:inline-block;為了對文字進行高度設定，且使兩個標籤在同一行顯示）；
話不多說，來個例子
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<styletype="text/css">
.out{
width:100%;
height:100px;
background: red;
}
.outimg{
width:100px;
display:inline-block;
vertical-align:middle;
}
.outspan{
display:inline-block;
height:80px;
line-height:80px;
}
</style>
</head>
<body>
<divclass="out">
<imgsrc="../img/8.jpg"/>
<span
</div>
</body>
</html>
下圖為效果圖：
--------------------------覺得有用的記得關注哦！我會繼續努力的！