Horizontally align with vertical orientation of children in div

Question

I have a 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>

The problem with my code is, the herfs are showing horizontally. I want to align them horitontal center of the div and with vertical orientation. How can i do that

Answer 1

Try to add some properties in your class,

.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;
}