以html/css爲中心的div輸入元素

我需要輸入類型元素居中對齊相等。我以某種方式設法平等對齊輸入類型，但現在它左對齊。我需要它是中心對齊。以html/css爲中心的div輸入元素

.container { 
 
    width: 500px; 
 
    clear: both; 
 
} 
 
.container input { 
 
    width: 100%; 
 
    clear: both; 
 
}

<div class="container"> \t 
 
    <label>EMP ID </label><input type="text" id="empid"> <br><br> 
 
    <label>EMP NAME</label><input type="text" id="empname"> <br><br> 
 
    <label>EMAIL ID</label><input type="text" id ="emailid"> <br><br> 
 
</div> \t 
 
<input type="submit" class="appButton" value="INSERT" onclick="insert();"> <br><br> 
 
    \t \t

來源

2015-10-21 Vikram Srinivasan

的[水平居中一個div在一個div]可能的複製（http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div） – easwee

爲什麼我在標籤和輸入周圍添加了一個包裝類是因爲在編寫標記結構非常重要時，它應該是靈活的，如果將來要說要將某些其他組件替換爲這些標籤和輸入你可以簡單地把它放在這個包裝中，它會更加語義化和組織良好。

.container { 
 
    width: 100%; 
 
    clear: both; 
 
} 
 
.container input { 
 
    width: 200px; 
 
    clear: both; 
 
} 
 
.container label { 
 
    display: block; 
 
} 
 
.wrapper { 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    margin-bottom: 10px; 
 
}

<div class="container"> 
 
    <div class="wrapper"> 
 
    <label>EMP ID</label> 
 
    <input type="text" id="empid"> 
 
    </div> 
 
    <div class="wrapper"> 
 
    <label>EMP NAME</label> 
 
    <input type="text" id="empname"> 
 
    </div> 
 
    <div class="wrapper"> 
 
    <label>EMAIL ID</label> 
 
    <input type="text" id="emailid"> 
 
    </div> 
 
    <div class="wrapper"> 
 
    <input type="submit" class="appButton" value="INSERT" onclick="insert();"> 
 
    </div> 
 
</div>

來源

2015-10-21 06:18:03 imGaurav

您可以用CSS中心您輸入容器：

.container { 
    margin: 0 auto; 
    width: 500px; 
    clear: both; 
}

說明：margin是外部元素的空間。當您的元素具有固定的寬度時，您可以使用邊距將該元素水平居中。 0用於元素周圍的垂直空間。

來源

2015-10-21 06:07:03 Sim

謝謝@Sim它的工作，雖然我的輸入類型看起來很長，我可以減小其大小？ –

我已經圍繞輸入集中了您的容器。只需給容器一個較小的寬度，並且容器周圍100％寬度的輸入元素會顯得更小。 – Sim

雅我減少到一半它工作正常謝謝你@Sim –

也許這樣的事情？

<style> 
.container 
{ 
    width:500px; 
    clear:both; 
    margin:20px auto; 
} 

.container input[type="text"] 
{ 
    width:100%; 
    padding:0 2%; 
    height:24px; 
    display:block; 
    font-size:14px; 
    margin-bottom:14px; 
    border:1px solid #ccc; 
} 

.container input[type="text"]:focus 
{ 
    border-color:#666; 
} 

input.appButton 
{ 
    width:30%; 
    height:32px; 
    font-size:15px; 
    margin-top:14px; 
    border:1px solid #ccc; 
    border-radius:4px; 
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #aaaaaa)); 
    background: -moz-linear-gradient(#ffffff, #aaaaaa); 
    background: -webkit-linear-gradient(#ffffff, #aaaaaa); 
    background: linear-gradient(#ffffff, #aaaaaa); 
} 

input.appButton:hover, input.appButton:active 
{ 
    box-shadow:inset 0 2px 3px rgba(0,0,0,0.1); 
    cursor:pointer; 
    text-decoration:underline; 

} 

*:focus 
{ 
    outline:none; 
} 

</style> 

<div class="container">   
<label>EMP ID </label><input type="text" id="empid"> 
<label>EMP NAME</label><input type="text" id="empname"> 
<label>EMAIL ID</label><input type="text" id="emailid"> 
<input type="submit" class="appButton" value="INSERT" onclick="insert();">  
</div>

來源

2015-10-21 06:38:03 Kerry7777

以html/css爲中心的div輸入元素

回答

相關問題