我知道其中有很多,但出于某种原因,我一直未能实现它们。
所以我需要类.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;
}
我尝试过的:
尝试使用 padding-top
和 padding-bottom
- 这似乎没有正确对齐,然后我无法让布局正确放置。
还研究了使用 position: relative
和 position: absolute
但我对它们的使用一直不太好,无法设法让内容位于我的位置想要它。
最佳答案
我冒昧地对您的标记进行了一些操作,并添加了一个额外的 div
来实现输出。
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
下使用它们进行显示!
关于html - 对齐 div 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20215496/