如何將DIV中的圖像和文本置於右側？溢出問題

Question

我有一個div容器，我想把一個居中的圖像和一個小的描述向右。規格如下：

1. 圖像的底邊應爲35px。
2. 圖像應該始終顯示在屏幕上，所以它在屏幕顯示時會調整大小。它應該有儘可能大的尺寸，但不能裁剪，也不要使用滾動條。
3. 圖像應該以容器爲中心，文字顯示在右邊距上。
4. 文字應該水平左對齊，垂直居中對齊，與圖像間隔30px。

我試過在容器中使用table並使用div s，但我找不到乾淨的解決方案。我可以向您展示我根據請求嘗試的非工作代碼。

Answer 1

這是一個棘手的。使用的實際標籤並不重要，只是元素的數量以及嵌套方式。

文本的垂直居中是通過Flexbox完成的，該Flexbox支持有限（Chrome，IE10，Opera，Safari，大部分移動瀏覽器）。 Firefox（帶有2009年的Flexbox屬性）通常會被放在這裏，但它有一個錯誤，它可以防止Flexbox應用到絕對定位的元素上。

http://cssdeck.com/labs/iu0gx2wk

標記：

<div class="gallery"> 
    <article> 
    <h1>My image title</h1> 
    <img src="http://placekitten.com/640/480" alt="A really cute kitten" /> 
    </article> 
</div> 

CSS：

.gallery { 
    padding: 0 230px; 
    text-align: center; 
} 

article { 
    display: inline-block; 
    max-width: 100%; 
    position: relative; 
} 

img { 
    max-width: 100%; 
    vertical-align: text-bottom; 
} 

h1 { 
    position: absolute; 
    text-align: left; 
    right: -230px; 
    top: 0; 
    bottom: 0; 
    width: 200px; 
    margin: 0; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-align: center; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    align-items: center; 
} 

或者，你可以添加一個額外的元素，並使用表/表單元顯示特性，讓您的垂直居中。

http://cssdeck.com/labs/lqgjgghw

標記

<div class="gallery"> 
    <article> 
    <h1><span>My image title</span></h1> 
    <img src="http://placekitten.com/640/480" alt="A really cute kitten" /> 
    </article> 
</div> 

CSS

.gallery { 
    padding: 0 230px; 
    text-align: center; 
} 

article { 
    display: inline-block; 
    max-width: 100%; 
    position: relative; 
} 

img { 
    max-width: 100%; 
    vertical-align: text-bottom; 
} 

h1 { 
    position: absolute; 
    text-align: left; 
    right: -230px; 
    top: 0; 
    bottom: 0; 
    width: 200px; 
    margin: 0; 
    display: table; 
} 

h1 span { 
    display: table-cell; 
    vertical-align: middle; 
} 

*注意：演示有他們的填充/通過一點點的定位了，這裏列出的代碼是正確的。