Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
Like Tree1Likes
  • 1 Post By Vapr_Arts

Thread: How to properly align text vertically inside a div element?

  1. #1
    Junior Member
    Join Date
    Dec 2015
    Posts
    25
    Member #
    52725
    Liked
    1 times

    How to properly align text vertically inside a div element?

    Here are two contrasting examples; the second being the cheat that I am inclined to use.

    non-corrected
    A Pen by Captain Anonymous

    corrected -using buttons
    A Pen by Captain Anonymous

    The "cheat" is to use buttons as they align/scale by themselves. Until the window shrinks too small where the font is too big for the button, but that would be a media query issue I think.

    So seeing what I'm trying to accomplish, what is the proper way to do this, without using an image.

    There is a way right?

  2.  

  3. #2
    Junior Member
    Join Date
    Dec 2015
    Posts
    25
    Member #
    52725
    Liked
    1 times
    This is supposed to be the second link. Man this website is slow.

    A Pen by Captain Anonymous

  4. #3
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    The way I do it, and in my opinion one of the easiest ways is using FlexBox. Its a great property that people are only starting to see now.

    Another option is to adjust the line height of the text so that it matches the height of the div. this works until you need the div to be responsive. If the responsiveness makes it so that it scales vertically too, your line height will not adjust.

    Both options are pretty easy but if I had to recommend one over the other it would be Flexbox. Google Css-Tricks Flexbox guide and you will see a visual explanation of how it works and what does what. Its supported in most browsers but you will need the prefixes for everything but Chrome if I remember correctly.


    Sent from my iPhone using Tapatalk
    Krazyhawk likes this.

  5. #4
    Junior Member
    Join Date
    Dec 2015
    Posts
    25
    Member #
    52725
    Liked
    1 times
    Others have recommended flexbox as well, would you say that this combined with media queries pretty much solves all the problems of responsive design?

  6. #5
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    No, there is a lot more to responsive design than that, photo size being one that neither solve, but its definitely a big help.


    Sent from my iPhone using Tapatalk

  7. #6
    Junior Member
    Join Date
    Dec 2015
    Posts
    25
    Member #
    52725
    Liked
    1 times
    regarding the photos, setting either width to 100% and height to auto, vice versa to a scaling container?

    Also, is it better to design a single layout that shifts... although I think if depending on the purpose of the site, the design would change


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:49 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com