-
Posts
-
On my site – http://alexandere68.sg-host.com/ right below the slider area, I have 3 columns with 3 locations in text boxes, I have added some custom css with flex box to achieve this. Everything looks great but for some reason something in the enfold theme is causing it not to center vertically. (if I test this outside of the enfold theme, it is vertically ceneterd)
Please assist.
try:
.trioDetails { display: flex; flex-flow: column nowrap; justify-content: space-around; margin: 10px 0; padding: 0; } .trioDetails * { margin: 0; }Hi navindesigns,
Please try @Guenni007’s solution, it should center those texts vertically.
@Guenni007 Thanks for helping out :)Best regards,
NikkoOk that works but now the only thing is that the icon on the left also needs to be vertically aligned
add to the existing flex container:
.homeTrioLocation { align-items: center; } .trioIcon { padding: 30px 15px; }play with the 15px value to get the part bigger. f.e. 25px
Hi,
I see that your trioIcon div is missing your icon html:
<i class="bi bi-pin-map-fill" style="font-size: 1.25rem; color: white;"></i>
Please use the code block element instead of the text block element to display html code.Best regards,
MikeI switched it to code block but now it is taller because
http://alexandere68.sg-host.com/ the “Phone” and the “number” are now on separate lines
how do I keep them on the same line?
Thanks
Hi,
This is because your .trioDetails has a 20px margin, try changing it to zero:
Then clear your browser cache and check.Best regards,
MikeThat removed the gap but I still want to keep the “Phone: 718-263-5999” on one line. Thanks as always
Hi,
Ok you will need to make .trioDetails display:block
so your new css would be:.trioDetails { display: block; margin: 0 0; padding: 0; }Best regards,
Mike
- The topic ‘Vertically center text’ is closed to new replies.