CODEWITHSUNDEEP
htmlcss
user6509972
user6509972

Reputation: 247

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?

Upvotes: 0

Views: 887

Answers (3)

dg4220
dg4220

Reputation: 369

Change to this:

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

} The width attribute will make you container the same width as it's parent container. The text-align attribute will center the text. The left and right attributes are trying to make the #wiz container be 50% from each side giving an effective width of 0 which is forcing the text to stack.

Upvotes: 0

Quentin
Quentin

Reputation: 944523

left: 50%; right: 50% — if the left edge is half way across the container and the right side is half way across the container, then the width of your box is going to be 0 and the content will word wrap at the earlier opportunity.

Remove position, top, left, and right. If the element isn't a block by default, add display: block.

Consider replacing top with margin-top.

Upvotes: 0

Johannes
Johannes

Reputation: 67799

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)

Upvotes: 1

Related Questions