在div中水平對齊兒童的垂直方向

Question

我有一個div

.popupClass {
    width: 632px;
    height: 210px;
    position: absolute; 
    bottom:0;
    margin-bottom: 60px;
}


.popupClassDiv {
    vertical-align: bottom;
    display: block;
    background: url("../images/popup.png");    
}

.popupHerf{

    text-decoration : none; 
    color : darkgrey;

}

<div class="popupClass">
         <div class="popupClassDiv" style="background-size: 184px 210px; background-repeat:no-repeat; margin-left: 90px; width: 184px; height: 210px; position:relative; "  id="mainMenuDiv" hidden>
             <a class="popupHerf" href="categories.php"><b>Categories</b></a>
             <a class="popupHerf" href="about.php" ><b>About Us</b></a>
         </div>

         <div class="popupClassDiv" style="background-size: 184px 210px; background-repeat:no-repeat; margin-left: 190px; width: 184px; height: 210px; position:relative; "  id="shareDiv" hidden>
             <a class="popupHerf" href="#" id="facebook" >Facebook</a></li>
             <a class="popupHerf" href="#" id="email" >Email</a></li>
             <a class="popupHerf" href="#" id="pin" >Pinterest</a></li>
             <a class="iframe popupHerf" href="sms.php">SMS</a></li>
         </div>

     </div>

我的代碼的問題是，書架水平顯示。 我想將它們的div的水平中心與垂直方向對齊。 我怎樣才能做到這一點

Answer 1

嘗試在您的課程中添加一些屬性，

.popupClassDiv {
    vertical-align: bottom;
    display: block;
    background: url("../images/popup.png");   
    width:100%; // add this
    text-align:center;// add this, if needed
}
.popupHerf{
    display:block; // add this in your anchor tag
    margin:0 auto;// add this, if needed
    text-decoration : none; 
    color : darkgrey;
}