1

I have a flexbox row container with an icon of unspecified width as the left flex-item and a multi-line block of text as the second flex item.

The thing is, I want this text to be in the exact center of the flexbox container, and at the moment it is pushed to the left by the first flex item.

One way to center it is to pad the right-hand side of the text box to the same width as the icon, e.g. using margin-right.

Or perhaps I could set an :after element on the text to add another flex box to the right? What's the best way to do this?

E.g.

<div style="display: flex; width: 10em; align-items: center; border:1px solid blue; text-align:center">
<a style="flex: none; width:auto">&rarr;</a>
<a style="flex:1; /* margin-right: how do I make this the same width as the &rarr; box above*/">here <br> is a load of text.<br>I want it to be centered in the div,<br>not shifted to the right</a>
</div>
Pete
  • 57,112
  • 28
  • 117
  • 166
user2667066
  • 1,867
  • 2
  • 19
  • 30

3 Answers3

0

You want to center blocks inside parent block so that one block will be not counted, so you need to get it out of the flow, set it position: absolute. There you can read more.

Winni
  • 85
  • 1
  • 7
0

I would do it like this: 

<div>
  <a class="a">&rarr;</a>
  <a class="b">here <br> is a load of text.<br>I want it to be centered in the div,<br>not shifted to the right</a>
</div>

 div {
  position relative;
  display: flex; 
  justify-content: center;
  align-items: center; 
  max-width: 22em; 
  height: 22em;
  border:1px solid blue; 

  a.a {
    position: absolute;
    left: 0;
    align-self: center;
  }

  a.b {
    display: flex;
    justify-content: center;
    align-self: center;
    flex: 1;
  }
}

https://jsfiddle.net/km5gdrcm/2/

Özlem
  • 79
  • 2
0

Position the icon a absolutely, this takes it out of the document flow so it won't affect the centered box. 

<div class="container">
<a class="icon">&rarr;</a>
<a class="centered-box">here <br> is a load of text.<br>I want it to be centered in the div,<br>not shifted to the right</a>
</div>

.centered-box {
  flex: 1;
}

.container {
  position: relative;
  display: flex; 
  width: 20em; 
  align-items: center; 
  border:1px solid blue; 
  text-align:center;
}

.icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

Fiddle: https://jsfiddle.net/nt4shjn5/

Fiddle with padding added to container to avoid overflowing the text over the icon: https://jsfiddle.net/nt4shjn5/1/

Rick Calder
  • 18,310
  • 3
  • 24
  • 41
  • Thanks. Will this mean that the text risks overlapping the icon as the container shrinks, though? – user2667066 May 16 '17 at 11:07
  • Unfortunately yes, you can add padding to the container to stop that though. – Rick Calder May 16 '17 at 11:08
  • See the second fiddle I posted to avoid overrunning the icon. – Rick Calder May 16 '17 at 11:11
  • 1
    Thanks. But unless I'm mistaken, you have set the padding to a fixed width, which means that you have to know the width of the icon (which I don't). If I knew the icon width I could simply set padding-right on the text box. – user2667066 May 16 '17 at 11:17
  • This is very true, but do you expect the icons to vary that much? I am having a hard time imagining a situation where you'd have a huge range in width honestly. – Rick Calder May 16 '17 at 11:21