康復中心的形式？

所以#container已經居中，但我似乎無法得到<form>居中。我想讓表單中的所有內容都以水平爲中心，並且出於某種原因，它不起作用。我已經嘗試了我所知道的每一個技巧。康復中心的形式？

<!-- Container Start --> 
<div id="container"> 
    <h1 class="signup-header-text">SIGN UP</h1> 
    <div class="clear"></div> 
    <form class="signup-form" action="#" method="post"> 
    <div id="first_step"> 
     <div class="form"> 
     <label for="gender">You are:</label> 
     <br /> 
     <select id="gender" name="gender" size="2"> 
      <option value="1">Male</option> 
      <option value="2">Female</option> 
     </select> 
     <div class="clear"></div> 
     </div> 
     <div class="clear"></div> 
     <input class="submit" type="submit" name="submit_first" id="submit_first" value="" /> 
    </div> 
    </form> 
<div id="progress_bar"> 
     <div id="progress"></div> 
     <div id="progress_text">0% Complete</div> 
</div> 
</div> 
<!-- Container End -->

我的CSS

#container { 
    height: 410px; 
    min-height: 410px; 
    min-width: 756px; 
    width: 756px; 
    overflow: hidden; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -205px; /* Half the height */ 
    margin-left: -378px; /* Half the width */ 
    background: #e9e5e5; 
    border: solid #dcdcdc 2px; 
    outline: solid #c4c4c4 1px; 
    -webkit-box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28); 
    -moz-box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28); 
    box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28); 
}

來源

2013-01-05 kevingilbert100

添加文本對齊：中心;

#container { 
height: 410px; 
min-height: 410px; 
min-width: 756px; 
width: 756px; 
overflow: hidden; 
position: absolute; 
top: 50%; 
left: 50%; 
margin-top: -205px; /* Half the height */ 
margin-left: -378px; /* Half the width */ 
background: #e9e5e5; 
border: solid #dcdcdc 2px; 
outline: solid #c4c4c4 1px; 
-webkit-box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28); 
-moz-box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28); 
box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28); 
text-align: center; 
}

http://jsfiddle.net/xjL7t/

來源

2013-01-05 01:02:55

試試這個：

.signup-form { 
    margin: 0 auto; 
}

來源

2013-01-05 00:54:09 keithjgrant

這並沒有工作沒有什麼改變：/ – kevingilbert100

它與

標籤，他們爲什麼要被淘汰：/ – kevingilbert100

嘗試添加顯示：塊;也定義一個寬度。 – user1721135

只需居中文本。

#container { 
    height: 410px; 
    min-height: 410px; 
    min-width: 756px; 
    width: 756px; 
    overflow: hidden; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    **text-align:center;** 
    margin-top: -205px; /* Half the height */ 
    margin-left: -378px; /* Half the width */ 
    background: #e9e5e5; 
    border: solid #dcdcdc 2px; 
    outline: solid #c4c4c4 1px; 
    -webkit-box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28); 
    -moz-box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28); 
    box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28); 
}

來源

2013-01-05 01:04:52 mah2602

查找要居中的元素，被設置的寬度，並在其上設置margin: 0 auto。

.signup-form { 
    margin: 0 auto; 
    width: 100px; 
}

http://jsfiddle.net/EXLSJ/

如果你不想設定一個固定的寬度，請按照以下說明 '拆封' 你的容器：How to make div not larger than its contents?

來源

2013-01-05 01:05:07 alexvance

添加text-align: center;：

#container { 
height: 410px; 
min-height: 410px; 
min-width: 756px; 
width: 756px; 
overflow: hidden; 
position: absolute; 
top: 50%; left: 50%; 
margin-top: -205px; /* Half the height */ 
margin-left: -378px; /* Half the width */ 
background: #e9e5e5; 
border: solid #dcdcdc 2px; 
outline: solid #c4c4c4 1px; 
-webkit-box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28); 
-moz-box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28); 
box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28); 
**text-align: center;** 
}

來源

2013-01-05 01:13:14 bazite

加

text-align:center; 
float:center; 
clear:center;

還與左，右

來源

2013-01-05 01:18:07 user1932459

康復中心的形式？

回答

相關問題