对齐div内容

Question

我知道其中有很多是关于但由于某些原因我一直未能实施它们。

所以我需要班级.infobox中的内容位于div的中间位置。所以我需要它垂直和水平对齐。

我已将所有我的代码放在下面作为我尝试过的一些“修复”但导致布局移动等等。所以希望你们可以让它们保持一致，而不会导致布局中断。

小提琴在底部。另外，如果您有关于如何更新布局代码的任何提示，请告诉我。但主要问题是调整内容。

HTML：

<div id="con">
    <div id="box">
        <div id="header"><h1>Test</h1></div>
        <div id="left">
            <div class="infobox">Test: <br /> <input /> </div>
            <div class="infobox">Test: <br /> <input /> </div>
            <div class="infobox">Test: <br /> <input /> </div>
            <div class="infobox">Test: <br /> <input /> </div>
        </div>
        <div id="right">
            <div class="resultbox">
                  <ul>
                      <li>Test <br />Test</li>
                </ul>
            </div>
            <div class="contactbox">
                <ul>
                    <li>Phone Number: <br /> 00000 000000</li>
                    <li>Email: <br /> test@Test.com</li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS：

div {
    outline: 1px solid #000;
}
#box {
    width: 580px;
    height: 300px;
}
#header {
    height: 15%;
    background: url(http://us.123rf.com/400wm/400/400/mechanik/mechanik1112/mechanik111200003/11665900-vector-cartoon-semi-truck.jpg) no-repeat;
    background-size:80px 40px;
    background-position:right top;
}

#left {
    width:70%;
    height: 85%;
    float: left;
}
#right {
    width:30%;
    height: 85%;
    float: right;
}
.infobox {
    width: 50%;
    height: 50%;
    float: left;
    text-align: center;
}
.resultbox {
    width: 100%;
    height: 50%;
}
.contactbox {
    width: 100%;
    height: 50%;
    font-size: 12px;
}
.contactbox ul, .resultbox ul {
    margin: 0;
}
.contactbox li, .resultbox li {
    list-style: none;
}

DEMO HERE

我尝试了什么：

尝试使用padding-top和padding-bottom - 这似乎没有正确对齐，然后我无法让布局正确坐下。

同时考虑使用position: relative和position: absolute，但我对它们的态度从来没有太好，也无法将内容放在我想要的位置。

Answer 1

我冒昧地操纵你标记了一点，并添加了额外的div来实现输出。

Fiddle

<强> HTML

<div class="infobox">
    <div class="cent">Test:
        <br />
        <input />
    </div>
</div>

<强> CSS

.infobox > .cent {
    outline: 1px solid #0F0;
    vertical-align: middle;
    margin-top:20%;
}

这里发生了什么??? ：因为你的内容div infobox具有样式，为内部内容（不浮动）提供不同的样式集，你 在child div下使用它们进行显示！

Answer 2

将margin:0 auto;添加到#box

像这样：http://jsfiddle.net/c82DU/2/

Answer 3

你可以看看这个网站，它解释了一些关于桌子的信息。

您使用的布局看起来像一张桌子，为什么不使用表？更容易文本对齐 http://www.w3schools.com/html/html_tables.asp