Question

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

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

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

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

我尝试将内容包装在盒子div中并应用居中，但是当父div是内联块时它不起作用。我可以把它作为一个块放在那个div包装器的中心，但是然后父div会让所有人变得难以理解并且不会排成一行。这里的任何建议都会很棒。

以下是代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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，这意味着使用less代替更好的实践。

我还经过一些清理后挖出你的CSS标记，并认为你需要做的只是将'margin：0 auto'属性添加到所需的元素，以确保它们始终在其容器中居中。请注意，'display：table-cell'已移至您的自定义正文容器中。如果您有更多问题，请与我们联系。

#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的答案）。我仍然必须在box 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>

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

3 个答案: