html - 在另一个 div 中对齐一个 div

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 上的源代码后，我意识到这是因为“气泡”并不总是在气泡 wrapper 内水平居中。有谁知道我该如何修复它，以便气泡 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;
}