html - 对齐 div 内容

Question

我知道其中有很多，但出于某种原因，我一直未能实现它们。

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

我已将所有 我的代码放在下面，因为我尝试的一些“修复”有效但导致布局移动等等。所以希望你们能够在不破坏布局的情况下对齐它。

fiddle 在底部。另外，如果您对如何整理布局代码有任何提示，请告诉我。但主要问题是对齐内容。

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 具有样式，因此可以为内部内容(不是 float 的)提供一组不同的样式，您必须在子div下使用它们进行显示!