使用CSS居中搜索框

-1

這是定位框的主要代碼。我需要將搜索輸入與其他部分一起放在任何大小的屏幕上。盒子的輸入區域一直移動到屏幕的最右側，這是一個問題。使用CSS居中搜索框

.wsite-search { 
    position: relative; 
    margin-top:78px; 
    margin-right:auto; 
    margin-bottom:0px; 
    margin-left:auto; 
} 

.wsite-search-input:focus { 
    background: #f8f8f8; 
    border: 1px solid #000; 
} 

.wsite-search-input { 
    width: 158px; 
    height: 19px; 
    border: 0; 
    padding: 10px 45px 10px 7px !important; 
    font-family: 'Oxygen', sans-serif; 
    color: #8e8e8e; 
    font-size: 17px; 
    line-height: 24px; 
    background: #fff; 
    border: 1px solid #000; 
    border-radius: 3px; 
    font-weight:300; 
} 

.wsite-search-button { 
    position: absolute; 
    width: 18px; 
    height: 18px; 
    border: 0; 
    right: 14px; 
    top: 10px; 
    background: url(submit-button-v3.png) no-repeat 0px 0px; 
}

來源

2015-02-10 phoenix713

你介意創建一個JSfiddle嗎？我敢肯定，我可以爲你中心，但JSfiddle與相關的HTML和你的CSS會幫助我更好地測試它。謝謝。 – racecarjonathan 2015-02-10 21:44:21

提供HTML代碼以及css – PRAH 2015-02-10 22:07:06

是不是隻有一個簡單的方法來使盒子始終居中？我認爲這會很簡單，但我一直髮現問題在於盒子相對於屏幕大小移動。 – phoenix713 2015-02-10 23:32:40

是你想市中心僅輸入框本身，如果是的話，你可以，如果你想中心的輸入和按鍵採用保證金

margin: 0 50%;

http://jsfiddle.net/rlynjb/eyjzhj8s/

居中中間。您可以將這2個元素包裝在div標籤中，並使用邊距：0 50％來居中這兩個元素。

來源

2015-03-05 23:45:03

使用CSS居中搜索框

回答

相關問題