Question

我需要一些关于如何正确地将文字和左或右位置图像居中在一个＆＃39; a＆＃39;标签

目标是拥有以下按钮： - 左对齐图像 - 文本水平居中但如果有更多行文本则保留aligen - 所有元素应垂直居中。 - 必须适用于大多数现代浏览器（例如，低于9的IE无关紧要） - 仅使用CSS

我制作了一个示例，它似乎与静态高度一起工作（例如100px）这是我的小提琴：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>

DEMO FIDDLE

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>

带有居中文字和左对齐图像的按钮

3 个答案: