仅在 CSS 两侧（左侧和底部）图像旁边居中文本的更好方法

Question

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

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

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;
}

Answer 1

水平对齐确实很容易，垂直对齐有点棘手。 Here is a good article on vertical alignment

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

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

这意味着文本开始从左到上的 50%。这不是您真正想要的（据我了解）。

使用一点 javascript，您可以获得文本的大小并将其准确地替换在图片的中心。 See the JSBIN solution with javascript

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

我只是解释一下css代码的sn-p

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

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

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

感谢this website，它确实提示了我解决问题的正确方法！