2017-08-01 71 views
3

你如何使這個搜索按鈕居中對齊水平?你如何水平對齊提交按鈕?

This is how it looks like

input.search { 
    width: 7em; height: 3em; 
    float: right; 
    padding-right: 10px; 
    background-color: #777777; 
} 
+3

您需要更改**按鈕的容器**的樣式,而不是按鈕樣式。你需要將容器更改爲'text-align:center' –

+1

請發佈有問題的代碼:帶有容器和相關CSS的按鈕。 – beerwin

回答

1

輸入默認使用display:inline;風格,這意味着父元素需要有text-align:center;這樣的:

.parent { 
 
    background-color: #404040; 
 
    text-align: center; 
 
    padding: 5px; 
 
}
<div class="parent"> 
 
    <input type="submit" class="submit" value="Submit"> 
 
</div>

或可替代,您可以更改顯示器類型到display:block;按鈕/輸入的PE和使用汽車的利潤率是這樣的:

.parent { 
 
    background-color: #404040; 
 
    padding: 5px; 
 
} 
 
.submit { 
 
    display:block; 
 
    width: 100px; /* note that display block will go full width unless you specify otherwise */ 
 
    text-align:center; 
 
    margin: auto; 
 
}
<div class="parent"> 
 
    <input type="submit" class="submit" value="Submit"> 
 
</div>

1

這是你需要什麼?

.full-width { 
 
    text-align:center; 
 
    width:100%; 
 
    float:left; 
 
    background:#404040; 
 
    padding:5px; 
 
}
<div class="full-width"> 
 
    <input type="button" value="search" /> 
 
</div>

+1

啊!你太快了:) :) – Frits

0

可以使用中心標記

<center> 
 
<input type="button" value="search"/> 
 
</center>

+0

雖然有些瀏覽器可能仍然支持,但'

'標籤[已棄用](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center)在HTML5中。希望這不會出現奇怪,也許將其添加到您的答案中,我可以從評論中刪除它? – Frits