flex does not center long lines

Question

I'm trying to make an array of "buttons" with links. It works fine when the text is only one line, but if the text wraps to two lines, the lines get left justified. I'd rather have both lines centered.

.brand-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 500px;
    height: 100%;
    font-family: Montserrat, verdana, sans-serif;
}
.brand {
    font-size: 14px;
    width: 31%;
    height: 50px;
    background-color: #eee;
    border: solid 3px white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.brand A {
    text-decoration: none;
    color: #6f6f6f;
    line-height: normal;
}
a {
    outline: none;
    border: none;
}

<div class="brand-wrap">
  <div class="brand"><a href="#">Short</a></div>
  <div class="brand"><a href="#">words</a></div>
  <div class="brand"><a href="#">gets centered</a></div>
  <div class="brand"><a href="#">Both horizontally</a></div>
  <div class="brand"><a href="#">and vertically</a></div>
  <div class="brand"><a href="#">But long sentences get left-justified</a></div>
</div>

score 1 · Accepted Answer · answered Mar 08 '21 at 00:52

Try this:

.brand-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 500px;
  height: 100%;
  font-family: Montserrat, verdana, sans-serif;
}

.brand {
  font-size: 14px;
  width: 31%;
  height: 50px;
  background-color: #eee;
  border: solid 3px white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.brand A {
  text-decoration: none;
  color: #6f6f6f;
  line-height: normal;
}

a {
  outline: none;
  border: none;
}

<div class="brand-wrap">
  <div class="brand"><a href="#">Short</a></div>
  <div class="brand"><a href="#">words</a></div>
  <div class="brand"><a href="#">gets centered</a></div>
  <div class="brand"><a href="#">Both horizontally</a></div>
  <div class="brand"><a href="#">and vertically</a></div>
  <div class="brand"><a href="#">But long sentences <b>DON'T</b> get left-justified</a></div>
</div>

The problem with your code was that because it overflowed, the container expanded to the maximum possible width, making it appear as if the text wasn't center-aligned. Adding a text-align:center fixes that problem.

score -1 · Answer 2 · answered Mar 08 '21 at 00:51

-1

You can try adding justify-content: center; or align-items: center; on your flexbox container!

answered Mar 08 '21 at 00:51

FelixACR

89
2

1

They already have. – Endothermic_Dragon Mar 08 '21 at 00:52
Maybe I did not understand correctly. It seemed to me that .brand was contained by .brand-wrap, not the opposite! – FelixACR Mar 08 '21 at 02:03
Yes, they both have flexbox, however, the problem was with the inner 'flexing' of .brand. – Endothermic_Dragon Mar 08 '21 at 12:48

flex does not center long lines

2 Answers2