CODEWITHSUNDEEP
htmlcsscentering
Stephan-v
Stephan-v

Reputation: 20299

Text-align center not working for some reason?

I can't seem to get my text to align center. It works fine vertically but the text-align seems to be influenced by something.

It's the "Autorondreis" text in the header(main image on top) of this project:

Example

The h1 element with the .center-text class that I'm trying to center vertically and horizontally:

position: relative;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
display: block;
color: white;
text-shadow: 0 1px 5px grey;

Could somebody take a look and help me figure out why it's not centering horizontally?

Upvotes: 0

Views: 8280

Answers (4)

Rachel Gallen
Rachel Gallen

Reputation: 28563

Try this

adjust your h1 tag to 

h1{width:100%;}

Then your h1 class="center-text" should be central.

Upvotes: 1

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28455

You need to add style clear:both to 2 elements i.e. h1 tag with class center-text and nav tag with class navigation-menu

Hence, your updated css will be like following

.navigation-menu {
    position: relative;
    z-index: 1;
    clear: both;
}

.center-text {
    position: relative;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    display: block;
    color: white;
    text-shadow: 0 1px 5px grey;
    clear: both;
}

Upvotes: 4

Rohit Kumar
Rohit Kumar

Reputation: 2031

use these css only and they will work, I have tried with my Firefox code inspector and its working -

.center-text {
    position: relative;
    top: 50%;
    left: 50%; /* added this line and changed the next four lines */
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    display: inline-block; /* changed this line */
    color: white;
    text-shadow: 0 1px 5px grey;
    clear: both;
}

Upvotes: 1

Eugene Stamp
Eugene Stamp

Reputation: 158

It is being centered to it's parent div.

try doing this: 

body > #YourDiv
{ 
position: relative;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
display: inline; <---Changed to inline
color: white; 
text-shadow: 0 1px 5px grey;
}

Let me know what results you achieve.

Upvotes: 2

Related Questions