具有居中文本和左對齊圖像的按鈕

Question

我需要一些有關如何正確地在'a'標簽內將文本和左右位置圖像居中的建議。

目標是具有以下按鈕：-圖像左對齊-文本水平居中，如果更多行文本，則左對齊字母-所有元素應垂直居中。 -必須能在大多數現代瀏覽器上運行（例如IE低於9沒關系）-僅使用CSS

我做了一個可以與靜態高度（例如100像素）配合使用的方言，這是我的小提琴： https ://jsfiddle.net/CtH9k/5819/

-

但是我如何使它正確地工作寬度動態高度，尤其是文本給我的問題。

 line-height: 100%;

這是我的動態高度的小提琴https://jsfiddle.net/CtH9k/5820/

關於我可能做錯了什么的任何好的建議，關於這個主題的一些不錯的教程或想法。

Answer 1

首先，要小心。 當您使用position:absolute您必須添加與要與之定位元素的父級position:relative 。 在您的第一個jsfiddle中，由於a ， div和body處於相同位置，因此看起來像在工作。 在第二個中，由於添加了跨接包裝器，因此圖像“丟失”。

您可以使用以下CSS：

top:50%;
transform: translateY(-50%);

無論是絕對位置還是相對位置，您都將始終確保無論容器或元素高度如何，都將始終居中。

所以我將這些屬性添加到您當前的屬性中：

.spanText {    
    position:relative;
    top:50%;
    transform: translateY(-50%);
}

.imgWrapper{
    top:50%;
    transform: translateY(-50%);
}

a {position:relative;}

並且可以正常工作（嘗試將“ 200px”高度更改為所需的任何值：

JSFIDDLE

Answer 2

您可以嘗試以下一種方法：

 <div>
        <a href="#">
            <span class="imgWrapper">
                <img src="https://33.media.tumblr.com/avatar_11e745804f61_128.png" /></span>
        <span class="spanText">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
        </a>
    </div>

演示場

Answer 3

嘗試flexbox。

 a { display: flex; align-items: center; } a .textWrap { flex: 1; display: flex; flex-flow: wrap; justify-content: center; } 

 <div> <a href="#"> <img src="https://33.media.tumblr.com/avatar_11e745804f61_128.png" /> <span class="textWrap"> <span class="spanText">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </span> </a> <a href="#"> <img src="https://33.media.tumblr.com/avatar_11e745804f61_128.png" /> <span class="textWrap"> <span class="spanText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </span> </a> </div>