按钮，文本居中，图像左对齐

Question

我需要一些关于如何在'a'标签内正确居中文本和左或右位置图像的建议。

的目标是有按钮与:-左对齐图像-文本水平居中，但左对齐，如果更多的文本行-所有元素应该垂直居中。-必须在大多数现代浏览器上工作(例如，ie9以下的浏览器无关紧要)-只使用CSS

我做了一个例子，似乎与静态高度(例如:100px)工作。这是我的小提琴:https://jsfiddle.net/CtH9k/5819/

,

但是我如何使这个工作正确的宽度动态高度，特别是文本给我的问题。

 line-height: 100%;

这是我的小提琴动态高度https://jsfiddle.net/CtH9k/5820/

有什么好的建议，我可能做错了，也许一些伟大的教程或想法关于这个话题

Answer 1

首先，要小心。当您使用position:absolute时，您必须将position:relative添加到您想要定位元素的父元素。在你的第一次尝试中，它看起来是有效的，因为你的a, div和body在相同的位置。在第二种情况下，图像会"丢失"，因为您添加了一个span包装器。

你可以使用这个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>