I have div and two components in it, logo and phone number. I managed to place logo in center of div, but phone number is not exactly in the center:
I want a phone number a little bit (text.height / 2) down. How to do this?
<div class="payments-mobile-cash-insert-round-corner-div payments-mobile- cash-insert-number-box">
<img id="service-logo" src="//:0"
data-bind="attr: { src: paymentService.image }"/>
<span id="phone-number" class="textstyle-4"
data-bind="text: infoLines[0].value">
</span>
</div>
.payments-mobile-cash-insert-round-corner-div{
margin: auto;
border: 1px solid #dfdfdf;
border-radius: 7px;
width: 1170px;
text-align: center;
}
.payments-mobile-cash-insert-number-box {
height: 196px;
}
.payments-mobile-cash-insert-number-box img{
vertical-align: middle;
}
.payments-mobile-cash-insert-number-box span{
margin-left: 50px;
font-size: 62px;
line-height: 196px;
vertical-align: middle;
}
Add this code in your css file for the phone number component,
.height{
padding-top:10px;
padding-left:5px;
}
in your html code, add the following line to class attribute section of phone number component,
class="height"
Please try it this css..
.class
{
display: table-cell;
float: none;
vertical-align: middle;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.