Question

我已经完全定位了包含输入和按钮的div（#searchContainer）。当前div是向右对齐的。我想创建一个媒体规则，将这个div在小于600px宽的屏幕上水平居中。就像输入和

的按钮一样

#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>

enter image description here的父元素宽度为100％，因此按钮位于输入下方（在小于600像素的屏幕上）。

Answer 1

   @media screen and (max-width: 600px) {
       #searchContainer {
         left: 50%; 
         transform: translateX(-50%);
       }
   }

您可以使用@media规则以600px max-widht应用CSS。可以使用绝对元素水平居中放置“ left：50％”和“ transform：translateX（-50％）”。

别忘了重置“正确”和填充语句

如何创建媒体规则以将绝对div水平居中？

1 个答案: