英文:
How to sets this input-box to center
问题
我现在正在学习CSS，尝试模仿YouTube的主页。
但我不知道如何将这个输入框设置在.input-box的中间。
请帮助我解决这个问题。我尝试在Google上搜索过，但解决方案会改变边距，我不知道如何处理。
这是我的代码。
HTML:
<div class="input_box">
<input type="text" placeholder="搜索">
</div>
CSS:
.input_box {
box-sizing: border-box;
width: 519px;
height: 26px;
}
.input_box > input {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 1px 0 1px 0;
margin: auto;
border: none;
outline: none;
font-family: inherit;
box-sizing: border-box;
background-color: #11274c;
font-size: 100%;
}
我以这种方式设置背景颜色，以便更容易区分。
英文:
I'm learning CSS now and trying to imitate Youtube's homepage.
But I don't know how to set this input in the middle of this .input-box
Please help me to solve this problem.
I tried to search it on Google, but the solution will change the margin and i don't know how.
Here is my code.
HTML:
<div class="input_box">
<input type="text" placeholder="Search">
</div>
CSS:
.input_box {
box-sizing: border-box;
width: 519px;
height: 26px;
}
.input_box>input {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 1px 0 1px 0;
margin: auto;
border: none;
outline: none;
font-family: inherit;
box-sizing: border-box;
background-color: #11274c;
font-size: 100%;
}
I set the background color this way to make it easier for me to tell
答案1
得分: 1
将上述样式添加到您的输入框的外部 <div> 中，以使其作为一个垂直排列其项目的 flexbox 容器。要水平对齐项目，您可以添加 justify-content: center;。
英文:
.input_box {
display: flex;
align-items: center;
}
You may add the above style to your input box's outer div so that it will behave as a flexbox container vertically aligning its items.
To align items horizontally you can add justify-content: center;.
答案2
得分: 0
.input_box {
box-sizing: border-box;
width: 519px;
height: 26px;
margin: 0 auto;
float: none;
}
英文:
.input_box {
box-sizing: border-box;
width: 519px;
height: 26px;
margin: 0 auto;
float : none;}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论