難以集中輸入和帶邊框的文本

我在創建輸入時遇到困難並圍繞文本創建邊框。我試圖用基於百分比的設置來對其進行集中，以便它變得更加快速響應。看來百分比是關閉的，每次我越過left: 35%;時，它不會再移動了。難以集中輸入和帶邊框的文本

這同樣適用於我的提交按鈕，在搜索輸入內部。我把剩下的百分比拿出來了，因爲它沒有做任何事情。

我已存儲的所有代碼這個小提琴的內部：

但是，以獲得最佳的選項來查看什麼，我試圖做的，是要訪問我的網站。 realtorcatch.com/test_index

我怎樣才能讓文字邊框/搜索欄在頁面中居中？

這裏是我的CSS

.search_option_container_out { 
    text-align: center; 
    top: 450px; 
    left: 30%; 
    position: absolute; 
    z-index: 111; 
} 
.search_option_box { 
    position: absolute; 
    text-align: center; 
    left: 40%; 
} 
.search_option_box li { 
    display: inline; 
    border: 1px solid black; 
    line-height: 2em; 
    padding: 20px 75px; 
    background: rgba(24, 24, 24, 0.3); 
    color: #FFFFFF; 
    cursor: pointer; 
} 
.search_option_box li:hover { 
    background: rgba(0,0,255, 0.3); 
} 
.home_searchbar_out { 
    text-align: center; 
    padding-top: 60px; 
} 
.home_searchbar { 
    padding: 10px; 
} 
.home_search_input { 
    position: absolute; 
    left: 45%; 
    width: 575px; 
    padding: 14px; 
    font-size: 1.1em; 
} 
#home_search_submit { 
    padding: 11px 20px; 
    position: absolute; 
    background-color: blue; 
    color: #FFFFFF; 
    cursor: pointer; 
    font-size: 1.1em; 
    z-index: 1; 
}

來源

2015-10-20 Becky

你的代碼演示在這裏：https://jsfiddle.net/ghp4t489/4/

基本上，你要使用爲中心的容器內頁，像這樣的概念：

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    position: absolute; 
 
    top:0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
}

<div>my div here</div>

此代碼使用margin: auto將div放在頁面中央。

編輯：https://jsfiddle.net/ghp4t489/7/與上右按鈕和旁邊的輸入

https://jsfiddle.net/ghp4t489/9/與按鈕右側的輸入

來源

2015-10-20 15:44:08 indubitablee

這是OP，爲了'餘量內：汽車;'到必須定義一個_width_。 – hungerstar

太棒了！這肯定有幫助。那麼提交按鈕呢？我無法弄清楚如何在搜索輸入的內部，右側，以及它是否有一定的響應。 – Becky

@Becky，所以對於你的按鈕，我可以問你爲什麼要在搜索輸入內搜索它 - 或者你只是想讓它們「連接」？你的演示在左側，你會喜歡它的右側還是左側？ – indubitablee

難以集中輸入和帶邊框的文本

回答

相關問題