如何将块中的图像和文本居中

Question

如何将带有文本的图像居中于块中？

我知道你可以通过给后者一个固定的宽度和margin: auto将一个块置于另一个块内。但是，我事先并不知道文本的尺寸（实际文本内容可能会有所不同）。

我到目前为止的CSS：

.outer {
    width: 400px;
}

.outer table {
    border: 0;
    width: 100%;
}

.outer table td {
    vertical-align: middle;
    text-align: center;
}

.outer table td p {
    text-align: left;
}

Answer 1

请查看此DEMO

这是我的css：

.block {
  text-align: center;
}
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}
.centered {
  display: inline-block;
  vertical-align: middle;
}
.left {
    float: left;
}

关于：在元素之前的说明：

这是一个不可见的元素伪元素，用于更好的垂直居中：它模拟一个0大小的内联块元素，它与普通的内联块元素（.centered）一起允许我们使用vertical-align。

<强>更新 您可以将高度设置为.block，以查看它将如何垂直居中： http://jsfiddle.net/jb5EJ/5/

更新2：更接近：http://jsfiddle.net/jb5EJ/13/

Answer 2

结帐此链接。我希望你能得到解决方案。

http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

TLDR：只有这个CSS你可以将一个元素放在绝对中心（水平和垂直）：

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Answer 3

将vertical-align:middle;添加到img也是，我建议将height添加到outer类

<img src="some_src" style="vertical-align:middle;" /> I have some text too

demo to get u started