我试图将标签和输入元素居中。
我都试过了，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;
}
最佳答案
Centering the elements in div
我会说:设置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;
}
关于html - 居中 div 中的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18357843/