在另一个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的来源之后，我意识到这是因为“气泡”并不总是在气泡包装纸内水平居中。 有谁知道我可以解决这个问题，以便气泡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类将解决此问题:)