垂直對齊圖像和多行文本

Question

我正在嘗試垂直對齊圖像和文本：

+-------------------------+ -- Viewport
|         Text text text  | 
| +-----+ text text text  | 
| |IMAGE| text text text  | 
| +-----+ text text text  | 
|         text text text  | 
+-------------------------+ 

如果文本未換行，這可以正常工作。 如果文本比視口寬度寬，它就不再起作用了。 我認為這是由於設置 display: inline-block:

<a href="#">
    <img style="display: inline-block; vertical-align: middle; margin-right: 8px;" src="images/arrow_black.png" /> 
    <span style="display: inline-block; vertical-align: middle;">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonum eirmod tempor invidunt ut labore et dolore 
    </span>
</a>

結果：

+---------------------------------------------------------------------+ -- Viewport
|                                                                     |                                                            
| +-----+                                                             | 
| |IMAGE| text text text text text text text text text text text text | 
| +-----+                                                             |                                                           
|                                                                     | 
+---------------------------------------------------------------------+ 

+-------------------------+ -- Viewport
| +-----+ Text text text  | 
| |IMAGE| text text text  | 
| +-----+ text text text  | 
| text text text text     | 
+-------------------------+ 

如果我嘗試浮動元素，圖像將始終位於頂部，但不會在文本中間垂直對齊：

    <a href="#">
        <img style="display: block; vertical-align: middle;  margin-right: 8px; float: left;" src="/images/arrow_black.png" /> 
        <span style="display: block; overflow: auto;"> 
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
        </span> 
    </a>

結果：

+-------------------------+ -- Viewport
| +-----+ Text text text  | 
| |IMAGE| text text text  | 
| +-----+ text text text  | 
|         text text text  | 
|         text text text  | 
|         text text text  | 
+-------------------------+ 

我已經看到了這個問題的幾種解決方案，使用 html-tables 或 css-tables (display: table and display: table-cell)，但這不是一個選項，因為它必須適用於所有類型的瀏覽器（桌面和移動）。

對此，我不知道任何尺寸。 既不是圖像也不是文本。 所以我不能使用任何“邊距或填充解決方案”。

編輯：我創建了一個演示小提琴（基於 NGLN 創建的那個，順便說一句：謝謝。）顯示我正在尋找的結果：但我嘗試在不使用顯示的情況下存檔它。 表格單元格..？ 有任何想法嗎？

Answer 1

你的意思是像這個演示小提琴嗎？

HTML：

<div id="viewport">
    <a href="#">
        <img src="images/arrow_black.png" alt="" />
        <span>Lorem ipsum dolor...</span>
    </a>
</div>

CSS：

#viewport {
    background: #bbb;
    width: 350px;
    padding: 5px;
    position: relative;
}
#viewport img {
    position: absolute;
    top: 50%;
    margin-top: -30px;  /* = image height div 2 */
}
#viewport span {
    margin-left: 68px;  /* = image width + 8 */
    display: block;    
}

Answer 2

這是一種我並不引以為豪的方式，但這是我所知道的在沒有 js 或 flexbox 的情況下存檔的唯一方式。

 #viewport { width: 350px; padding: 5px; position: relative; } #viewport a { background: #bbb; display: inline-block; } #viewport img { display: block; } #viewport i, #viewport span { display:table-cell; vertical-align:middle; } /* Using padding to add gutter between the image and the text*/ #viewport span { padding-left: 15px; }

 <div id="viewport"> <a href="#"> <i><img src="//www.gravatar.com/avatar/be15533afe64a3939c5201a65a19d7ed/?default=&s=80" alt="" /></i> <span>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</span> </a> <a href="#"> <i><img src="//www.gravatar.com/avatar/be15533afe64a3939c5201a65a19d7ed/?default=&s=80" alt="" /></i> <span>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</span> </a> </div>

這樣無論哪個元素的高度更高，文本和圖像將始終對齊到中間。

Answer 3

如果您可以估計圖像寬度和文本寬度之間的比率，我建議您在文本跨度上設置百分比寬度。

Answer 4

您說由於不知道大小而不能使用邊距/填充答案。 但是，為什么不直接使用百分比將圖像向下放置，然后將所有內容拆分為 div 呢？

<div id="viewport">
    <div id="image">
        <img src="http://source..." />
    </div>
    <div id="text">
        Whatever
    </div>
</div>

然后在您的 CSS 中，執行以下操作：

#viewport {
  width:800px;
  height:500px;
  border:1px solid #FFF;
}     

#image {
  width: 400px;
  float:left;
  height:100%;
  text-align: center;
}

img {
  margin-top:50%;
}

#text {
  width:300px;
  float:left;
}

顯然，所有的寬度和高度都可以是百分比，或者您希望如何處理它們。 但是，這應該呈現您想要的樣子。 希望我正確理解您的問題。