在另一個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類將解決此問題:)