centering the text

[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]

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

[nuodas159]

#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.

[Taufik Nurrohman]

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.

[Taufik Nurrohman]

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;
}

{MESSAGE_TITLE}

{MESSAGE_TEXT}

{S_HIDDEN_FIELDS}
 

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

[Kitty Giraudel]

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

[Kitty Giraudel]

It is.

[Author]

Posts