html - 在固定内联 block 中垂直居中各种内容

Question

我有一个我无法解决的问题，需要这个很棒的社区的帮助。我想弄清楚如何在垂直和水平方向上使元素在 div 中居中。看起来很简单，但我能找到的一切似乎都不起作用。以下是标准:

首先，页面有一个固定的标题。正文也是固定的，从标题下方开始，溢出设置为自动，因此它可以在需要时滚动。在正文中，我有包裹在其中的 div 容器，因此整个 div 是一个可点击的链接(基本上是一个大按钮)。我使用 div 而不是表格的原因是因为我需要它完全响应和 self 居中。 div 被设置为内联 block ，因此它们将自己居中并一个接一个地出现。 div 也有固定的高度和宽度，但 body 没有，所以它可以保持响应。

我费了一番功夫才走到这一步，在尝试了不同的方法后终于搞定了，但现在我无法搞定最后一项:将各个div容器中的内容居中。在每个容器中，我都有一个图像和一些文本。每个框的图像大小和文本数量可能有所不同。我需要在 div 中垂直对齐图像和文本，并保持水平对齐。

这是我的 fiddle ，显示我现在所在的位置:jsfiddle

我尝试将内容包装在框 div 中并对其应用居中，但是当父 div 是内联 block 时它不起作用。我可以通过将 div 包装器设置为一个 block 来使其居中，但是随后父 div 变得不稳定并且没有正确排列。这里的任何建议都会很棒。

代码如下:

#t_header {
    width: 100%;
    position: fixed;
    top:0;
    left:0;
    height: 50px;
    text-align: center;
}
#t_body {
    width: 100%;
    position: fixed;
    top: 50px;
    left:0;
    bottom:0;
    overflow: auto;
    text-align: center;
}
.t_box {
    width: 170px;
    height: 250px;
    display: inline-block;
    margin: 5px;
	border-radius: 6px;
	padding: 5px;
	background-color: #FFFFFF;
    border: thin solid #000000;
}
.t_box_centerer {
    text-align: center;
    vertical-align: middle;
    display:table-cell;
}

<div id="t_header">
    <h1>Header</h1>
</div>
<div id="t_body"> 
    <a href="www.google.com">
        <div class="t_box">
            <div class="t_box_centerer">
                <img src="http://i.imgur.com/E8MzWW2.gif" width="100%"/><br>
                    This is my 1st image
            </div>
        </div>
    </a>
    <a href="www.google.com">
        <div class="t_box">
            <div class="t_box_centerer">
                <img src="http://i.imgur.com/E8MzWW2.gif" width="100%"/><br>
                    This is my 2nd image.  This has more text than the first but the next has less.
            </div>
        </div>
    </a>
     <a href="www.google.com">
        <div class="t_box">
            <div class="t_box_centerer">
                <img src="http://i.imgur.com/E8MzWW2.gif" width="100%"/><br>
                    This is my 3rd image.  There is less text.
            </div>
        </div>
     </a> 
</div>

Answer 1

请更新 css 类希望这会修复，因为我知道你想在 t_body 中将内容居中？

#t_body {
    width: 100%;
    position: fixed;
    top: 50px;
    left:0;
    bottom:0;
    overflow: auto;
    text-align:center;
}