user6509972 user6509972 - 5 months ago 11
CSS Question

Center a sentence on one line CSS

I am trying to place a sentence in the middle of the page. This is the code I came up with:

#wiz {
text-align: center;
text-transform: uppercase;
color: white;
position: absolute;
font-family: 'Roboto Mono', sans-serif;
top: 250px;
left: 50%;
right: 50%
}


This centers the txt but puts each word on top of the other instead of on one line. I tried adding height, width and then margin but I couldent get it to work.

How would I do this?

Answer

This in your code:

left: 50%;
right: 50%

causes that element to have zero width: The left border is 50% from the left side, the right border is 50% from the right side. Remaining space: 0

Just erase these two, text-align: center; is sufficient...

P.S.: Since position is absolute, you'll need to define a width, go for 100%. (or use position:relative; instead)