Forums

nuodas159

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%

Paulie_D

http://css-tricks.com/centering-in-the-unknown/

nuodas159

message-activate {

clear: left;
display: table;
text-align: center;
display: table-cell;
vertical-align: middle;

}

    <div id="message-activate">
      <form action="{S_CONFIRM_ACTION}" method="post">

        <h2>{MESSAGE_TITLE}</h2>
        <p>{MESSAGE_TEXT}</p>
        <br />
        <fieldset class="submit-buttons">
          {S_HIDDEN_FIELDS}
          <input type="submit" name="confirm" value="{L_YES}" class="button2" />&nbsp; 
          <input type="submit" name="cancel" value="{L_NO}" class="button2" />
        </fieldset>

      </form>
    </div>
  </div>

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

Hompimpa

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) */
}

nuodas159

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

nuodas159

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

Paulie_D

It is working.

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

Hompimpa

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/

chrisburton

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

nuodas159

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;

}

    <div class="block" style="height: 100%;">
    <div id="message-activate">
      <form action="{S_CONFIRM_ACTION}" method="post">

        <h2>{MESSAGE_TITLE}</h2>
        <p>{MESSAGE_TEXT}</p>
        <br />
        <fieldset class="submit-buttons">
          {S_HIDDEN_FIELDS}
          <input type="submit" name="confirm" value="{L_YES}" class="button2" />&nbsp; 
          <input type="submit" name="cancel" value="{L_NO}" class="button2" />
        </fieldset>

      </form>
    </div>
    </div>

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

HugoGiraudel

Seriously, just make a JSFiddle...

nuodas159

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

chrisburton

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

nuodas159

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

HugoGiraudel

It is.

nuodas159

Och sory not this jsfiddle was. :D I mean this: http://jsfiddle.net/hJtpF/3188/

Paulie_D

Here you go: http://codepen.io/Paulie-D/pen/oyveD

nuodas159

Thanks.

treehouse : what would you like to learn today?

Forums

[Solved] centering the text

message-activate {

message-activate {