中心兩個文本行右側的圖像

我想對齊圖像中心旁邊的兩個文本行。我試圖"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>，不知道它是否會起作用。

ANSWER與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>

謝謝大家的幫助！

來源

2016-04-12 Azdamus

電子郵件通常更好構造爲表。 –

嘗試構建帶有div和其他元素的電子郵件簽名時，您會遇到很多問題 - 表格是您最好的選擇，只是隱藏邊框。 –

您應該始終具有內嵌css電子郵件。 –

如果你不知道哪個郵件客戶端是要打開你的郵件其實呢，這是我該怎麼做的。

<table style="font-family: Helvetica; font-size: 13px; color: #000000; "> 
 
    <tr> 
 
    <td rowspan="2"> 
 
     <img style="border: 3px solid #000" src="http://placehold.it/100" alt=""> 
 
    </td> 
 
    <td valign="bottom"> 
 
     Line 1 of text 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td valign="top"> 
 
     Line 2 of text 
 
    </td> 
 
    </tr> 
 
</table>

來源

2016-04-12 16:55:36 LGSon

我試過了你的答案，而在Gmail中看起來沒問題，在Outlook中，兩行都位於圖像的右上方。我會試着找到一個修復程序。 – Azdamus

電子郵件通常是更好的構建爲表，但表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>

來源

2016-04-12 14:31:04

我試過你的答案，但它沒有設置圖像中心旁邊的兩行。棘手的部分是，在網頁瀏覽器中看起來沒問題，當你收到電子郵件（例如Gmail）時，文本顯示在圖像的右上角。 – Azdamus

中心兩個文本行右側的圖像

回答

相關問題