在div中居中
[英]Centering the elements in div
问题描述
我正在尝试将标签和输入元素居中。
我都尝试过， text-align: center; margin: 0 auto; 但它并没有受到影响。 下面我已经粘贴了HTML以及CSS代码。
绿色是下面的标签，它们是输入和选择元素
HTML
<body>
<div id="container">
<div id="header"> </div> <!--header-->
<div id="content">
<div id="searchForm">
<form method="" action="post">
<div>
<label for="keywords"> Keywords </label>
<input type="text" name="keywords">
</div>
<div>
<label for="location"> Location </label>
<input type="text" name="location">
</div>
<div>
<label for="job_category"> Job Category </label>
<input type="text" name="job_category">
</div>
<div>
<label for="experience"> Experience </label>
<input type="text" name="job_category">
</div>
<div>
<label for="experience"> Salary Expectation </label>
<select name="min_exp">
<option value=""> Min </option>
</select>
<select name="max_exp">
<option value=""> Max </option>
</select>
</div>
</form>
</div> <!--searchForm-->
</div> <!--content-->
<div id="footer"> </div> <!--footer-->
</div>
</body>
CSS
* {
margin: 0;
padding: 0;
}
#body {
background-color: #FFFFFF;
text-align: center;
}
#container {
margin: 0 auto;
width: 96%;
}
#header {
width: 100%;
height: 100px;
border: 1px solid #CCCCCC;
}
#content {
border: 1px solid #F7F7F7;
}
#searchForm {
width: 100%;
text-align: center;
background-color: red;
overflow:hidden;
margin: 0 auto;
}
#searchForm div {
background-color: green;
float: left;
text-align:center;
margin-left:5px;
}
#searchForm label {
display: block;
}
#footer {
width: 100%;
height: 60px;
border: 1px solid #CCCCCC;
}
5 个解决方案
解决方案1
1 2013-08-21 12:50:25
尝试
margin:0px auto;
text-align:left;
padding:15px;
解决方案2
1 已采纳 2013-08-21 12:51:56
在div中居中
我会说： Set display: inline-block; 子元素，和text-align: center; 到父<div>
#searchForm {
width: 100%;
text-align: center; /* <-- align center all inline children */
background-color: red;
overflow:hidden;
margin: 0 auto;
}
#searchForm div {
background-color: green;
display: inline-block; /* <-- display children as inline-block */
text-align: center;
margin-left: 5px;
}
解决方案3
1 2013-08-21 12:53:53
试试这个。希望对您有帮助。
{
margin-left:auto;
margin-right:auto;
width:70%;
}
这意味着它仅需要占用屏幕尺寸的70％的宽度。U可以应用于您的任何div以集中显示。
解决方案4
1 2013-08-21 12:54:02
您是否尝试将#searchForm的宽度设置为固定宽度？
#searchForm {
width: 500px;
text-align: center;
background-color: red;
overflow:hidden;
margin: 0 auto;
}
解决方案5
1 2013-08-21 12:56:26
将div标签放在form标签下，然后将其样式设置为text-align：center;
<form>
<div id="center">
...
<div>
</form>
#center {
text-align: center;
}
div上的居中元素
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.