Question

好的，这是我的网站http://joshadik307.github.io/。这是我需要帮助的具体代码

CSS：

.pagemenu {
 padding-top: 25px;
 padding-right: 2%;
 padding-left: 2%;
 text-align: center;
}
.bubblewrap {
 display: inline-block;
 vertical-align: top;
 width: 23%;
 margin-right: 5%;
 margin-left: 5%;
 text-align:center;
}
.bubble {
 background-color: white;
 border-radius: 50%;
 border-style: solid;
 border-width: 5px;
 border-color: black;
 width: 250px;
 height: 250px;
 display: inline-block;
}

5个圆圈中的一个的HTML（我认为它会节省空间只显示一个，但它们都使用相同的html并且都包含在相同的pagemenu div中）

   <div class = "pagemenu">

        <div class = "bubblewrap">

          <div class="bubble">
            <div class="text">
              <a href ="#aboutme">ABOUT</a>
            </div>

          </div>

        </div>
   </div>

好的，现在这是问题所在。如果你看看我的视线（链接到上面）基本上我有5个圆形div设置为在页面顶部（在标题下方）W的形状对齐。问题是W并不总是居中对齐在页面上，在查看chrome上的源代码后，我意识到这是因为“气泡”并不总是在气泡包装器中水平居中。有谁知道我怎么能修复它，以便泡泡div总是在bubblewrapper div中水平对齐？

Answer 1

将margin: auto;添加到.bubble班级

中

.bubble {
background-color: white;
border-radius: 50%;
border-style: solid;
border-width: 5px;
border-color: black;
width: 250px;
height: 250px;
margin: auto;
}

Answer 2

保证金：0自动;你的.bubble类会做修复：）

在另一个div中对齐div

2 个答案: