Grow your CSS skills. Land your dream job.

centering the text

  • # September 15, 2012 at 8:55 am

    Hello. How to do text in center, center. I mean this text-align: center; is centering in width page. How to center the text in height page? BTW if the page is height: 100%, min-height: 100%, max-height: 100%

    # September 15, 2012 at 10:10 am

    #message-activate {
    clear: left;
    display: table;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    }

    {MESSAGE_TITLE}

    {MESSAGE_TEXT}

    {S_HIDDEN_FIELDS}
     

    So how to do? I don’t understand there. -.- I mean not working.

    # September 15, 2012 at 10:18 am

    This works for me. Just for single line, use `line-height`:

    .text {
    display:block;
    width:500px;
    text-align:center; /* center horizontally */
    height:200px;
    line-height:200px; /* same with height (center vertically) */
    }
    # September 15, 2012 at 10:25 am

    I was saying that height is 100% with line-height: 200px deosn’t centering.

    # September 15, 2012 at 10:27 am

    Why not working? http://jsfiddle.net/chriscoyier/hJtpF/

    # September 15, 2012 at 10:48 am

    It is working.

    Look, put whatever code you are using into Codepen or jsFiddle or provide us with a live link.

    # September 15, 2012 at 11:10 am

    Here it is ⇒ http://jsfiddle.net/tovic/hJtpF/3162/

    If you make a modal window (I guess) with the involvement of JavaScript, it would be better to use them for centering the element:

    $(document).ready(function() {
    var $el = $('#message-activate'),
    el_w = $el.outerWidth(),
    el_h = $el.outerHeight();
    $el.css({
    'position': 'absolute',
    'top': '50%',
    'left': '50%',
    'margin-left': '-' + (el_w / 2) + 'px',
    'margin-top': '-' + (el_h / 2) + 'px'
    });
    });

    http://jsfiddle.net/tovic/hJtpF/3163/

    # September 15, 2012 at 11:16 am

    I also have a script someone made for me. Although it’s specifically for an image, you can change the jQuery a bit to fit your needs. http://christopherburton.net/includes/center.js

    # September 15, 2012 at 12:37 pm

    Why not working like this?

    .block {
    clear: left;
    text-align: center;
    }

    .block:before {
    content: ”;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    }

    #message-activate {
    display: inline-block;
    vertical-align: middle;
    }

    {MESSAGE_TITLE}

    {MESSAGE_TEXT}

    {S_HIDDEN_FIELDS}
     

    P.S. Thanks for ChristopherBurton and Hompimpa. BTW why not working?

    # September 15, 2012 at 1:26 pm

    Seriously, just make a JSFiddle…

    # September 15, 2012 at 3:00 pm

    Here…

    http://jsfiddle.net/tovic/hJtpF/3162/

    # September 15, 2012 at 3:34 pm

    @nuodas159 Do you mean like this? http://jsfiddle.net/hJtpF/3166/

    # September 16, 2012 at 2:31 am

    Nope I need this #message-activate to be vertical center

    # September 16, 2012 at 6:45 am

    It is.

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".