CODEWITHSUNDEEP
htmlcssflexbox
WoJ
WoJ

Reputation: 30035

Why wouldn't text-align align text in a div?

Aligning a text in a div is done via text-align. It normally works fine:

<div style="text-align:right;border:1px solid red">
  this goes to the right
</div>

I have a piece of code (in the middle of a large HTML generated with the help of vue.js) where the alignment is not applied. I forced a width of a div and wanted the text inside it to be aligned to the right:

enter image description here

There is ample space for the 8:00to move to the right but it stays centered. The CSS stack does not show anything special for this element:

enter image description here

What could be the reason for this alignment (or lack of)?

Note: I am not including the whole HTML/SCSS code as there is quite a lot of it - hopefully the CSS stack is enough?

Upvotes: 1

Views: 525

Answers (2)

Stickers
Stickers

Reputation: 78726

Flex items shrink to fit the content width or height if the flex container's relevant value isn't set to stretch and flex item's flex-grow isn't set to 1. Which means the size of the box is the size of the content, so that text-align has no effects. (Of course, there are also flex-basis and width factors, won't discuss here.)

Also note that text that is directly contained inside a flex container is automatically wrapped in an anonymous flex item.

You can fix that by setting this on the flex container:

div.start_display {
  display: flex;
  justify-content: flex-end;
}

Or, reset it to the default block if you don't need flex there:

div.start_display {
  display: block;
  text-align: right;
}

Or, wrap it into another tag, let's say a <span>:

div.start_display span {
  flex: 1;
  text-align: right;
}

You may need to increase the specificity level on the selector, as it's unclear on the screenshot.

Upvotes: 1

Kantoci
Kantoci

Reputation: 493

Since you are using display: flex here, text-align won't work. Change 

div {
 justify-content: space-around;
}

to 

div {
 justify-content: flex-end;
}

Edit: as @Jacob Gray notice, adding display: flex on div element isn't a good idea. It would be better to remove this property from div and use text-align where you need it

Upvotes: 5

Related Questions