Question

我难以集中输入并围绕我创建的文本边框。我试图以基于百分比的设置为中心，以便它变得更具响应性。似乎百分比已关闭，每次我越过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;
}

Answer 1

您的代码演示：https://jsfiddle.net/ghp4t489/4/

基本上，您希望使用在页面内集中容器的概念，如下所示：

＆＃13;

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

＆＃13;

<div>my div here</div>

＆＃13;

此代码使用margin: auto将div放在页面中心。

编辑： https://jsfiddle.net/ghp4t489/7/，右侧有按钮，输入旁边

输入

右侧的按钮

https://jsfiddle.net/ghp4t489/9/

难以将带有边框的输入和文本居中

1 个答案: