我有一个关于如何将输入文本框放在页面中心并做出响应的问题。
以下是HTML代码:
<body>
<div class="container container-padding50">
<input type="text" class="js-userinput container-textinput" placeholder="mySearchApp">
</div>
<div class="message">
<p>input anything you want search and press Enter</p>
</div>
<div class="js-container">
<!-- image shows here -->
</div>
<script src="javascript/main.js"></script>
</body>
我试过用CSS:
body {
width: 80%;
max-width: 1024px;
margin: 0 auto;
}
.container-padding50 {
padding-top: 50px;
left:50%;
}
.container-textinput {
text-aligen:center;
width: 80%;
/*display: relative;*/
left: 50%;
padding: 20px;
font-size: 16px;
font-family: Helvetica, sans-serif;
border:none;
border-bottom: 2px solid black;
}
我打算将输入字段设置为简单,因为只有#34; mySearchApp&#34;的下划线,但我已尝试使用left:50%
以便在页面中间进行此操作,可以有人告诉我为什么这不起作用?我在这里想念一下吗?
答案 0 :(得分:2)
要使用left
属性,必须定位元素。
left
CSS属性参与指定定位元素的水平位置。它对非定位元素没有影响。
试试这个:
body {
width: 80%;
max-width: 1024px;
margin: 0 auto;
}
.container-padding50 {
position: relative; /* NEW */
padding-top: 50px;
height: 80px; /* NEW */
}
.container-textinput {
position: absolute; /* NEW */
left: 50%;
transform: translateX(-50%); /* NEW; see note below */
text-align: center;
width: 80%;
padding: 20px;
font-size: 16px;
font-family: Helvetica, sans-serif;
border: none;
border-bottom: 2px solid black;
}
&#13;
<div class="container container-padding50">
<input type="text" class="js-userinput container-textinput" placeholder="mySearchApp">
</div>
<div class="message">
<p>input anything you want search and press Enter</p>
</div>
<div class="js-container">
<!-- image shows here -->
</div>
&#13;
为什么在居中时使用transform
: