文字垂直對齊另一個元素

在下面的代碼片段中，我有一個標題和一個圖像，兩個div都在一個容器div內。該圖像正確地浮動並且將具有80px的固定高度。我想要的是左側的標題，同一行右側的圖像以及底部與圖像對齊的文本。首先，我試着在.text-element上插入內嵌塊，並在.text-element-content上嵌入內容，但是vertical-align在這裏似乎不起作用。經過幾次嘗試和一些閱讀後，我想出了以下解決方案：table/table-cell，另外爲.text-element設置固定高度，然後vertical-align：bottom工作。但後來我看到了另一個（小）問題。現在標題文本中「p」的低點與圖像的底線位於同一條線上。但是我想要在圖像底線的同一行上顯示其他字母的底部，例如「e」，「d」，「t」。我嘗試了垂直對齊：基線，但它似乎完全是其他的東西......有沒有辦法實現我想要的？有沒有更好的方式來獲得垂直對齊：底部沒有表格/表格單元？由於某些原因，我可能不會更改DOM，只有其上的CSS，並且我也可能不使用彈性框。文字垂直對齊另一個元素

具有不同行高的解決方案並不能完全解決我的問題，因爲它只適用於這種特殊情況，只要字體發生變化，我就需要另一個行高。

.container-element { 
 
    position: relative; 
 
} 
 

 
.image { 
 
    float: right; 
 
} 
 

 
.text-element { 
 
    display: table; 
 
    height: 80px; 
 
} 
 

 
.text-element-content { 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 
}

<div class="container-element"> 
 
    <div class="image"> 
 
    <img src="https://image.ibb.co/eTiV6a/Unbenannt_1.png"> 
 
    </div> 
 
    <div class="text-element"> 
 
    <div class="text-element-content">I'm a title with help</div> 
 
    </div> 
 
</div>

來源

2017-08-16 yangsunny

我可以問，爲什麼你不能/不能使用柔性盒？ – lumio

可能重複的[CSS - 顯示文字在下降而不是基線？]（https://stackoverflow.com/questions/6178506/css-display-text-at-descent-instead-of-baseline） – kukkuz

@ lumio：caniuse .com告訴我IE瀏覽器與flexbox有問題。 – yangsunny

你可以嘗試調整line-height屬性的文本：

.container-element { 
 
    position: relative; 
 
    border-bottom: 1px solid red; 
 
} 
 

 
.image { 
 
    float: right; 
 
} 
 

 
.text-element { 
 
    display: table; 
 
    height: 80px; 
 
    line-height: .7; 
 
} 
 

 
.text-element-content { 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 
}

<div class="container-element"> 
 
    <div class="image"> 
 
    <img src="https://image.ibb.co/eTiV6a/Unbenannt_1.png"> 
 
    </div> 
 
    <div class="text-element"> 
 
    <div class="text-element-content">I'm a title with help</div> 
 
    </div> 
 
</div>

來源

2017-08-16 14:12:35 sol

this在這裏工作（我使用line-hight：0.9而不是0.7）。但這只是這個特例的一個工作。只要我，即改變字體，我需要另一個行高。 – yangsunny

@yangsunny不幸的是，我不確定另一種方法來做到這一點..如果你不打算改變字體，我猜它可以工作？ – sol

即使你說，你不能使用flex-box（因爲IE），我會用0123來回答解決方案。 IE11在flexbox上正常工作。請參閱caniuse.com上的已知問題。

與秩序的解決方案可能是這個樣子組合：

.container-element { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: baseline; 
 
} 
 

 
.image { 
 
    order: 2; 
 
} 
 

 
.text-element { 
 
    order: 1; 
 
}

<div class="container-element"> 
 
    <div class="image"> 
 
    <img src="https://image.ibb.co/eTiV6a/Unbenannt_1.png"> 
 
    </div> 
 
    <div class="text-element"> 
 
    <div class="text-element-content">I'm a title with help</div> 
 
    </div> 
 
</div>

來源

2017-08-16 14:19:15 lumio

Flexbox不是一個選項。查看問題中的最後一句。 –

同樣，flex-box在IE中工作得很好 - 我最近使用它很多，我們需要在我的公司 – lumio

這應該做它通過bootstrap啓發。

.container-element { 
 
    position: relative; 
 
} 
 

 
.media-left,.media-right { 
 
    display: table-cell; 
 
    vertical-align: top 
 
} 
 

 
.media-right { 
 
    padding-left: 10px 
 
} 
 

 
.media-left { 
 
    padding-right: 10px 
 
} 
 

 
.media-bottom { 
 
    vertical-align: bottom 
 
}

<div class="container-element"> 
 
    <div class="media-left media-bottom"> 
 
    I'm a title with help 
 
    </div> 
 
    <div class="media-right"> 
 
    <img src="https://image.ibb.co/eTiV6a/Unbenannt_1.png"> 
 
    </div> 
 
</div>

來源

2017-08-16 15:53:05 Purgatory

支持IE11，可悲的是我無法更改DOM，所以這並不能解決我的問題。 – yangsunny

文字垂直對齊另一個元素

回答

相關問題