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

Question

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:

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:

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?

@DreamHunter: not sure if you have seen my note at the very bottom of the question (which I put, anticipating such -rightful- requests). I always put a minimal code to reproduce the issue - here (as you can imagine from the multiple `.scss` files), the place where the issue happens is buried in a ton of generated HTML. — WoJ, Jan 05 '17 at 14:51
possible duplicate: [*Why do I need “text-align: center” when the container has “justify-content: center”?*](http://stackoverflow.com/q/39678610/3597276) — Michael Benjamin, Jan 05 '17 at 16:48

Kantoci · Answer 1 · 2017-01-05T14:50:01.957

5

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

edited Jan 05 '17 at 14:50

answered Jan 05 '17 at 14:38

Kantoci

493
2
11

1

I think the issue here is more that the OP is displaying every `div` on the page flex. – Jacob G Jan 05 '17 at 14:44
Right! This definitely is a problem! :) – Kantoci Jan 05 '17 at 14:45
@JacobGray: the whole page is entirely made up of "bricks" (several layers deep) which all stay together via `flex`. This was my reason to have `flex` as the default display. – WoJ Jan 05 '17 at 14:54
@WoJ I would still recommend having a more specific selector. – Jacob G Jan 05 '17 at 15:01

Stickers · Accepted Answer · 2017-01-05T15:49:23.157

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.

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

2 Answers2