CODEWITHSUNDEEP
htmlcsstext-alignment
Question Overflow
Question Overflow

Reputation: 11255

How to align vertical text horizontally center?

I have a vertical block of text that looks left-aligned like this:

T
e
x
t

See this demo for better visualisation.

How do I align it using CSS and without breaking up the text, so that the characters appear to be horizontally centered within the block?

Upvotes: 1

Views: 180

Answers (4)

T J
T J

Reputation: 43156

Letter spacing adds the space to the right of the letter. So you've to add equal padding to the left for imitating center alignment.

Apply padding-left equal to the letter-spacing

div {
width: 1em;
word-wrap: break-word;
margin:0 auto;
background: cyan;
letter-spacing:0.5em;
padding-left:0.5em;
text-align:center;
}

JSFiddle

Update

Visual appearance can be tweaked by simply changing the values…

JSFiddle

Upvotes: 1

Amit
Amit

Reputation: 1919

try this {demo}

div {
    background: cyan;
    width: 60px;
    line-height: 0.7em;
    text-align:center;
    word-wrap: break-word;
    padding:0 10px
}

Upvotes: 0

W.D.
W.D.

Reputation: 1041

What about this DEMO?

HTML

<div>
    <div>T</div>
    <div>e</div>
    <div>x</div>
    <div>t</div>
</div>

CSS

div {
    background: cyan;
    width: 1em;
    line-height: 0.7em; 
    text-align:center
}

OR this one DEMO 2

HTML

<div>
    T<br>
    e<br>
    x<br>
    t<br>
</div>

CSS

div {
    background: cyan;
    width: 1em;
    line-height: 0.7em; 
    text-align:center
}

Upvotes: 1

Raman Mandal
Raman Mandal

Reputation: 276

Try this FIDDLE

div {
    background: cyan;
    width: 1em;
    letter-spacing: 1em;
    line-height: 0.7em;
    word-wrap: break-word;
    margin: 0 auto;
}

Upvotes: 0

Related Questions