<分区>
<分区>
我已经绝对定位了包含输入和按钮的 div(#searchContainer)。当前 div 向右对齐。我想创建媒体规则，在小于 600px 宽的屏幕上水平居中这个 div。我也想像输入和按钮一样，宽度都是父元素的 100%，这样按钮就在输入下面(在宽度小于 600 像素的屏幕上)。
#searchContainer {
padding: 15px;
position: absolute;
top: 0;
right: 0;
}
#searchContainer input {
width: 200px;
}
#searchContainer button {
background-color: rgb(1, 159, 198);
width: 75px;
}<div id="searchContainer">
<input
class="searchControl"
type="text"
placeholder="City Name or Zipcode"
id="searchInput"
/>
<button class="searchControl" id="searchBtn">Search</button>
</div>最佳答案
@media screen and (max-width: 600px) {
#searchContainer {
left: 50%;
transform: translateX(-50%);
}
}
您可以使用@media 规则以 600 像素的最大宽度应用您的 css。绝对元素的水平居中，您可以使用“left: 50%”和“transform: translateX(-50%)”。
不要忘记重置“正确”和填充语句
关于html - 如何创建媒体规则以水平居中绝对 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55026043/