Question

我试图将标签和输入元素居中。

我尝试了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;
 }

enter image description here

Answer 1

尝试

margin:0px auto;
text-align:left;
padding:15px;

Answer 2

将元素居中于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;
}

<强> JSFiddle Demo

Answer 3

试试这个。希望它可以帮到你。

{
margin-left:auto;
margin-right:auto;
width:70%;
}

这意味着屏幕尺寸只需要70％的宽度.U可以应用于任何div来集中。

Answer 4

您是否尝试将#searchForm的宽度设置为固定宽度？

#searchForm {
   width: 500px;
   text-align: center;
   background-color: red;
   overflow:hidden;
   margin: 0 auto;
}

Answer 5

在表单标记下放置一个div标签，并将它们设置为text-align：center;

<form>
   <div id="center">
    ...
   <div>
</form>



#center {
    text-align: center;
}

将元素居中在div中

5 个答案: