[英]Horizontally align with vertical orientation of children in div
I have a div 我有一个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.
我想将它们的div的水平中心与垂直方向对齐。 How can i do that
我怎样才能做到这一点
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.