我正在尝试对齐图像中心旁边的两个文本行。我试过 "vertical-align: middle;"
但它不会像这样将我的文本保留在两行中:
this is what I'm trying to achieve.
我的代码包括:
<p class="address">
<img class="logo" src="source" alt="">
<span class="location">Line 1 of text</span>
<span class="location_2"> Line 2 of text</span>
</p>
使用 CSS 代码:
p.address{font-family: Helvetica; font-size: 13px; color: #000000; margin-left: 0px;vertical-align:center;}
span.location{display: inline; }
span.location_2{display: block; }
我也试过这个解决方案:http://jsfiddle.net/hiral/bhu4p04r/7/ - 但它会在图片下方显示文字。
图像是34x58px
我正在尝试通过 Outlook html 签名实现此目的。
我将尝试使用 <div>
容器,把<img>
在其中,然后是 <p>
,不知道它是否会起作用。
LGSon 稍作修改后给出的肯定结果答案,示例如下:
<table style="margin-bottom:5px; font-family: Helvetica; font-size: 13px; color: #000000;">
<tr>
<td>
<img style="max-height:52px" src="img_source_here" alt="">
</td>
<td valign="middle" style="font-size:14px; margin-left: 10px;">
Text 1<br>Text 2
</td>
</tr>
</table>
谢谢大家的帮助!
最佳答案
电子邮件通常最好构建为表格,但 CSS 表格可能会起作用:
img {
min-width: 75px;
height: 90px;
}
.columns {
display: table;
}
.columns div {
display: table-cell;
vertical-align: middle;
padding: 1em;
}
<div class="medium-12 columns">
<div class="imgwrap">
<img src="http://placekitten.com/g/75/90" class="left" />
</div>
<div class="text">1
<br />2
<br />3</div>
</div>
关于html - 在图像右侧居中放置两行文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36576217/