Navigation
Archive / Vertical Center Text
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • October 20, 2016 at 2:06 pm #1224314
    Cocchini.MD
    Participant

    Hey guys, Did a lot of read on this before posting and it seems to be a bit layout specific so I’m writing in.

    The solution needs to be responsive. The Xpx margin solutions might not scale correctly to ensure that the centers in vertically and horizontally centers in the row at all times. Perhaps a X% would work, or an inline code if there is one.

    Attachment: Looking to Vertically Center the text on the 5 rows.

    Thanks

    October 20, 2016 at 3:37 pm #1224448
    Joao
    Moderator

    Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

    October 20, 2016 at 5:30 pm #1224537
    Cocchini.MD
    Participant

    MissionMedSchool.com

    I resolved some of the issues in the attachments from the first message. I’m still having issues getting other rows to vertical center though (See Attached).

    Thanks

    October 20, 2016 at 5:31 pm #1224542
    Cocchini.MD
    Participant
    This reply has been marked as private.
    October 20, 2016 at 11:09 pm #1224925
    Rupok
    Member

    Hi there,

    You can use padding to make them vertically aligned because the vertical-align property works on image only. SO let’s add top padding for them.

    Thanks!

    October 21, 2016 at 3:03 am #1225116
    Cocchini.MD
    Participant

    Padding usually causes issues. Either is changes the dimensions of the row as well (rather than just moving the text around in the row) and/or it cases the background color of the row to get pushed (on mobile), which exposes the section background color behind it.

    Would you recommend padding with Xpx or with X%? What’s the difference in padding with pixels versus percentages?

    October 21, 2016 at 3:16 am #1225124
    Paul R
    Moderator

    Hi,

    Sorry for the confusion.

    Instead of using padding, you can vertically center your text by adding this to the style field of all adjacent columns.

    
display:inline-block;vertical-align:middle;

    Thanks

    October 21, 2016 at 3:23 am #1225127
    Cocchini.MD
    Participant

    Yes! That’s what I was looking for. I’ll play around with it. It’s all a matter of making it look right on both full screen and mobile.

    Thanks!

    October 21, 2016 at 3:32 am #1225133
    Cocchini.MD
    Participant

    Attached 1: This was the result with the code inserted and padding removed from the column completely.

    Attached 2: This is the result with the code inserted and 2% padding added back to the column.

    This works but is there a way to keep all 5 of the rows the same height and just vertically center the text in those rows without affecting the dimensions of the box?

    October 21, 2016 at 5:02 am #1225212
    Paul R
    Moderator

    Hi,

    You can try adding a min height to your columns.

    eg.

    
display:inline-block;vertical-align:middle;min-height:500px;

    Hope that helps.

    October 21, 2016 at 5:13 am #1225218
    Cocchini.MD
    Participant

    I think the trick is a mix of tactics depending on the specific element inside the row. I got it looking good on fullscreen and mobile, but in some cases I used padding (% and px) and other’s I used your code. Just depends.

    Thank you!

    October 21, 2016 at 7:40 am #1225364
    Joao
    Moderator

    Hi There,

    Based on your comment I am not sure if you still need help, in case you do provide more details about what you would like to fix,

    Thanks

    Joao

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1224314 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>