0

我正在尝试将标签和输入元素居中。

我都试过了，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;
 }

在此处输入图像描述

4

5 回答 5

1

尝试

margin:0px auto;
text-align:left;
padding:15px;
于 2013-08-21T12:50:25.007 回答
1

将 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 演示

于 2013-08-21T12:51:56.907 回答
1

试试这个。希望它会帮助你。

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

这意味着它只需要你屏幕尺寸的 70% 宽度。U 可以应用到你的任何 div 集中。

于 2013-08-21T12:53:53.777 回答
1

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

#searchForm {
   width: 500px;
   text-align: center;
   background-color: red;
   overflow:hidden;
   margin: 0 auto;
}
于 2013-08-21T12:54:02.510 回答
1

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

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



#center {
    text-align: center;
}
于 2013-08-21T12:56:26.313 回答