1

在图像的一侧或相对两侧（左/右或上/下）将文本居中非常容易，但我需要将一些文本文本沿图像左侧居中，并在底部居中一些文本。

我经历了几种解决方案，但每种解决方案都需要手动将一段文本或另一段文本居中。在下面的解决方案中，我选择在左侧手动应用垂直居中，因为在底部水平居中文本需要填充以随文本长度而变化。

Javascript会很容易。类似的东西

element.style.paddingTop = (Img_Height/2 - Txt_Height/2);

但我很难相信没有纯 CSS 解决方案。

有没有更好的方法来完成下面这段代码的相同效果？在此处查看实际操作：http: //jsfiddle.net/Gamil/yteBY/

<div class="Preview">
    <p class="Preview" style="padding-top: 54px;">120 pixels high</p>
    <ul class="Preview">
        <li><img alt="big preview" src="http://placehold.it/160x120" /></li>
        <li>160 pixels wide</li>
    </ul>
</div>
<div class="Preview" style="padding-top: 30px;margin-left: 30px;">
    <p class="Preview" style="padding-top: 23px;">60 pixels high</p>
    <ul class="Preview">
        <li><img alt="big preview" src="http://placehold.it/80x60" /></li>
        <li>80 pixels wide</li>
    </ul>
</div>

CSS：

.Preview {
    float: left;
}
ul.Preview > li {
    list-style: none;
    text-align:center;
}
4

1 回答 1

0

水平对齐确实很容易，垂直对齐有点棘手。这是一篇关于垂直对齐的好文章

所以关于你的问题，这是第一个解决方案：JSBIN 这个解决方案并不像我在 css 中那样完美：

.textC{
  position:absolute; 
  top:50%;
  left:50%;
}

这意味着文本从左侧和顶部的 50% 开始。这不是您真正想要的（据我所知）。

使用一点 javascript，您可以获得文本的大小并将其准确地替换在图片的中心。使用 javascript 查看 JSBIN 解决方案

编辑：这是一个新的解决方案，只使用 CSS：fiddle

我只解释一段css代码

.block1{
  #position: absolute;
  display: table-cell;
  vertical-align: middle;
  top: 50%;
  left: 50%;
}

.block2{
  #position: relative;
  display: block;
  bottom: 50%;
  right: 50%;
  margin:auto;
}

基本上添加#到位置会选择对象的中心而不是左上角。

感谢这个网站，它真的暗示了我解决问题的正确方法！

于 2012-11-27T14:13:51.070 回答