Menu
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:
704
In this CSS letter-spacing example, we have removed 1px of space between the characters by setting a -1px value for the letter-spacing property. This removes some of the character spacing that has been added by the selected font.
If you want to remove space between letters in word, Select the text, right-click, choose Font, and select the Advanced tab. Change the letter spacing as required.
Letterspacing (also known as character spacing or tracking ) is the adjustment of the horizontal white space between the letters in a block of text. Unlike kerning, which affects only designated pairs of letters, letterspacing affects every pair.
Can't you just specify padding-left: 1.5em; for your .container h5?
119
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
