垂直居中固定内联块中的各种内容

Question

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

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

我花了一些功夫才达到这一点，在尝试了不同的方法后我终于得到了它，但现在我无法得到最后一项：将内容集中在各个 div 容器中。在每个容器中，我都有一个图像和一些文本。每个框的图像大小和文本数量可能会有所不同。我需要在 div 中垂直对齐图像和文本，并保持水平对齐。

这是我的小提琴，显示我现在的位置：jsfiddle

我尝试将内容包装在盒子 div 中并对其应用居中，但是当父 div 是内联块时它不起作用。我可以将它设置为一个块的 div 包装器，但随后父 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;
}

Answer 2

我查看了您的代码并稍微清理了您的 HTML，这意味着使用少即是好的做法。

经过一番清理后，我还深入研究了您的 CSS 标记，发现您需要做的就是将 'margin: 0 auto' 属性添加到所需元素，以确保它们始终在容器中居中。请注意，“显示：表格单元格”已移至您的自定义正文容器。如果您还有其他问题，请告诉我。

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

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

Answer 3

好的，AGE 的回答帮我弄清楚了。如果我应该发布自己的答案而不是编辑问题，我不确定这里的礼仪是什么。如果这不是正确的回答方式，我可以删除。

这里是小提琴：fiddle

我首先删除了居中的 div，然后将 body div 中的元素设为内联块（根据上面 ACE 的回答）。我仍然必须在盒子 div 中设置高度和宽度，但由于该 div 不是内联元素，因此可以使用 vertical-align: middle 。

现在它具有固定的标题和可滚动的正文，框大小相同并排列整齐，内容水平和垂直居中，并且框位于页面中心并响应浏览器大小。这满足了我的所有需求，我将看看是否可以成功地将这些更改应用到我的网页。感谢您的帮助，有时只需采用不同的方法即可获得结果！

代码如下：

#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_body a {
    display: inline-block;
    margin: 5px;
}
.t_box {
    display:table-cell;
    width: 170px;
    height: 250px;  
    border-radius: 6px;
    padding: 5px;
    background-color: #FFFFFF;
    border: thin solid #000000;
    vertical-align: middle;
}

<div id="t_header">
    <h1>Header</h1>
</div>
<div id="t_body"> 
    <a href="www.google.com">
        <div class="t_box">
                <img src="http://i.imgur.com/E8MzWW2.gif" width="100%"/><br/>
                    This is my 1st image.
        </div>
    </a>
    <a href="www.google.com">
        <div class="t_box">
                <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>
    </a>
     <a href="www.google.com">
        <div class="t_box">
                <img src="http://i.imgur.com/E8MzWW2.gif" width="100%"/><br/>
                    This is my 3rd image.  There is less text.
        </div>
     </a> 
</div>