时间戳

首页 > 解决方案 > HTML/CSS 如何将容器对齐到页面中心？CSS：

html - HTML/CSS 如何将容器对齐到页面中心？CSS：

问题描述

试图将我的容器与页面的中心对齐，并将里面的项目与容器的中心对齐。当它缩小时，对齐会进一步向左移动。看起来不均匀的atm。这是我的 HTML 和 CSS：

https://jsfiddle.net/zr54b812/

CSS: 

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: white;
  border: 5px outset brown;
  padding: 10px;
  justify-content: space-between;
  width: 1000px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 17px;

}


HTML:

<!-- Cake Flavor-->
    <div class="grid-container">

    <div class ="grid-item">
    <h3>Cake Flavor</h3>
        <input type="checkbox" name="style1" value="style1">
        <label class="font1" for="style1">White</label>
        <input type="checkbox" name="style1" value="style1">
        <label class="font1" for="style1">Chocolate</label>
        <input type="checkbox" name="style1" value="style1">
        <label class="font1" for="style1">Yellow</label>
        <input type="checkbox" name="style1" value="style1">
        <label class="font1" for="style1">Marble</label><br>
        <input type="checkbox" name="style1" value="style1">
        <label class="font1" for="style1">Confetti (NEW)</label>
        <input type="checkbox" name="style1" value="style1">
        <label class="font1" for="style1">Red Velvet (NEW)</label>
    </div>
    <!--Filling option-->
    <div class="grid-item">
        <h3>Filling Option</h3>
        <input type="checkbox" name="style1" value="style1">
        <label class="font1" for="style1">Lemon</label>
        <input type="checkbox" name="style1" value="style1">
        <label class="font1" for="style1">Raspberry</label>
        <input type="checkbox" name="style1" value="style1">
        <label class="font1" for="style1">Strawberry</label>
        <input type="checkbox" name="style1" value="style1">
        <label class="font1" for="style1">Bavarian Cream</label><br>
    
    </div>

    </div>

标签： htmlcss

解决方案

要在中心对齐，可以使用margin: 0 auto;. 除此之外，您正在容器中创建一个额外的列，因此设置grid-template-columns为auto autoand not auto auto auto。

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
  margin: 0 auto;
  background-color: white;
  border: 5px outset brown;
  padding: 10px;
  justify-content: space-evenly;
  width: 1000px;
}

推荐阅读