CODEWITHSUNDEEP
cssalignment
levelnis
levelnis

Reputation: 7705

Centre align text that has extra letter spacing applied

What's the best way to centre align some text that has an increased letter-spacing so that it's actually in the centre of its container? The text is in an h5 tag that is centre aligned within the parent div but sits noticeably to the left because letter-spacing applies to the right of each letter. I could manually add some left padding but that wouldn't stay consistently aligned if the browser zoom level was changed.

Is there a way to calculate the spacing between each letter, either using css or JavaScript? Is there a better way to insert spacing between letters so everything is centrally aligned?

The container div already has 20px padding on all sides so I really need to add 0.75em to the left padding. Here's the relevant css for the h5 and container tags:

.container {
    padding: 20px;
    float: left;
}

.container h5 {
    font-size: 33px;
    letter-spacing: 1.5em;
    text-align: center;
}

The container looks like this:

container

Upvotes: 5

Views: 3476

Answers (3)

marcostrama
marcostrama

Reputation: 161

It's old, but another solution (trick) is to add a space between the characters. For me it's the best solution, because i want a big space between the characters ;)

Upvotes: -1

Ragnarokkr
Ragnarokkr

Reputation: 2328

Alternative solution could be to specify margin-right: -1.5em; for .container h5, so you won't add extra space into your container when aligned.

Upvotes: 3

Matthew Strawbridge
Matthew Strawbridge

Reputation: 20620

Can't you just specify padding-left: 1.5em; for your .container h5?

Upvotes: 4

Related Questions