具有居中文本和左对齐图像的按钮
具有居中文本和左对齐图像的按钮
提问于 2015-10-01 18:21:07
我需要一些关于如何正确地居中文本和'a‘标签中的左或右位置图像的一些建议。
我们的目标是让按钮：-左对齐的图像-文本水平居中，但如果更多的文本行左对齐-所有元素都应该垂直居中。-必须在大多数现代浏览器上运行(例如(9以下无关紧要)-仅使用CSS
我做了一个例子，它似乎与静态高度一起工作(例如，100px)这是我的小提琴：https://jsfiddle.net/CtH9k/5819/
--
但是我怎么才能让这个动态宽度合适的高度，特别是文字给我带来的问题。
line-height: 100%;这是我的动态高度https://jsfiddle.net/CtH9k/5820/小提琴
对我可能做错的地方有什么好的建议，也许是关于这个主题的一些很好的教程或想法。
回答 3
Stack Overflow用户
发布于 2015-10-01 18:44:19
首先，要小心。使用position:absolute时，必须将position:relative添加到要用来放置元素的父元素中。在你的第一个jsfiddle中，它看起来像是在工作，因为你的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“的高度改成你想要的：
Stack Overflow用户
发布于 2015-10-01 18:24:54
你可以试试这个：
<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>Stack Overflow用户
发布于 2015-10-01 18:35:13
试试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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32885103
复制相关文章
相似问题
腾讯云开发者
