Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Centring text horizontally & vertically

    I am trying to center the text displayed at the top of the larger pop ups that scroll on the slider. This is the title of the page. I was able to center them horizontally, but not vertically. Can anyone help me out? In the css, this is .banner h2

    http://174.120.16.66/~thomasse/


    Thanks

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Add #about-us and #meet-the-team in the html (see attachment, sorry photobucket won't upload right now)

    Add to CSS:
    Code:
    #about-us h2,
    #meet-the-team h2 {
        line-height: 85px;
    }
    Attached Thumbnails Attached Thumbnails Centring text horizontally & vertically-pkkl.png  
    Last edited by Sammy12; 08-23-2012 at 07:34 AM.

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    845
    Thanks
    11
    Thanked 79 Times in 77 Posts
    ☠ ☠RON☠ ☠

  • #4
    New Coder
    Join Date
    Aug 2012
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hmmm, not quite there yet. Let me tinker with this a bit. Thanks for the tips

  • #5
    Regular Coder
    Join Date
    Jun 2012
    Location
    Near Chicago, USA
    Posts
    123
    Thanks
    7
    Thanked 19 Times in 19 Posts
    OK, I don't see a slider.

    Perhaps this will help - centering both vertically and horizontally with examples.

    http://www.willmaster.com/library/we...g-with-css.php

    Will
    Numerology API for apps - Facebook, iPad, mobile phones. No charge to use API. [info]

  • #6
    New Coder
    Join Date
    Aug 2012
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks everyone. I am not sure what is going on with my code, but I can not get this to be 100% correct. I have tried several different css possibilities, but it never gets there..close but no cigar. Can anyone give me a hand with this. Hopefully, seeing the correct method will cement in my mind what I have been doing wrong & it will be a permanent lesson I will be able to use in the future. Thanks

  • #7
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    http://www.youtube.com/watch?v=jUI0mVusn1A

    you can also just use a class and add it to each one:

    Code:
    .slide-vertical-center {
          line-height: 85px;
    }
    Last edited by Sammy12; 08-30-2012 at 02:12 AM.

  • #8
    New Coder
    Join Date
    Aug 2012
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    http://www.youtube.com/watch?v=jUI0mVusn1A

    you can also just use a class and add it to each one:

    Code:
    .slide-vertical-center {
          line-height: 85px;
    }
    the issue I think may be that some have a single line of text, then others have 2 lines...difficult to overcome cleanly, at least for me.

  • #9
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    There is the vertical-align table hack which is what youtube uses. Wrap the <h2> in two <div>'s like so:

    Code:
    <div class="vcenter-container">
         <div class="vcenter">
                 <h2>Anything</h2>
         </div>
    </div>
    Centering style:
    Code:
    .vcenter-container {
         display: table;
         *position: relative; /* ie6 & 7 */
    }
    .vcenter {
         display: table-cell;
         vertical-align: middle;
         *position: absolute; *top: 50%; /* ie6 & 7 */
    }
    .vcenter h2 {
         *position: relative; *top: -50%; /* ie6 & 7 */
    }
    Setup code:
    Code:
    .banner .vcenter-container {
         height: 125px; /* requirement for vcenter-container */
         width: 100%;
         margin-bottom: 12px;
    }
    
    /* this part overwrites stuff on line 99 of style.css */
    .banner h2 {
         padding-bottom: 0 !important;
         height: auto !important;
         line-height: auto !important;;
    }
    Last edited by Sammy12; 09-06-2012 at 12:08 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •