I have some simple social media images, and I need the text to be in line with the center of each image. At the moment, the text is aligned to the bottom of each image, by default:
CSS:
.img {
background-color: red;
height: 3em;
width: 3em;
display: inline-block;
}
HTML:
<div class="sm">
<div class="img"></div>
facebook
</div>
<div class="sm">
<div class="img"></div>
instagram
</div>
<div class="sm">
<div class="img"></div>
facebook
</div>
<div class="sm">
<div class="img"></div>
isntagram
</div>
Add vertical-align:middle;
to img
or div
.
.img {
background-color: red;
height: 3em;
width: 3em;
display: inline-block;
vertical-align: middle; /*CAN GO HERE*/
}
div {
vertical-align: middle; /*OR HERE*/
}
You should add a margin
to the elements after to ensure that they're not all stuck together.
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.