Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Bold Font Weight Shifting Text Alignment

Post a Comment
I have labels aligned in three rows and displayed in regular text. I'd like to make these labels bold, but when I apply the property in CSS, the alignment gets a little messed up.

Solution 1:

Here's the problem you're having:

Each label box (.bold-label) is the width of its content (the text). This means that when the content expands (because you make it bold), the box will expand with it. This breaks your alignment.

To overcome this you could assign a width to each label box. With a large enough set width you can create enough space for the text to expand without changing the length of the box.

Try this:

.bold-label {
     display: inline-block;
     text-align: right; /* only works on block containers */width: 150px;
}

DEMO

Solution 2:

The only way to do this is to have the labels that need to be right aligned (above Surname) in a container element, like a div and apply text-align: right to that container.

Solution 3:

This is my code, but it puts the bullet-points on the left. Hope it is of help:

<!DOCTYPE html><html><head><style>li{
            font-weight:bold;
            text-align:right;}
</style></head><body><li>Consultation
    </li><li>Pharmacist
    </li><li>Registration No.
    </li></body>

Post a Comment for "Bold Font Weight Shifting Text Alignment"