具有居中文本和左对齐图像的按钮

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>