0

I am using flexbox to center a heading with an icon. I am trying to center the text part of the heading perfectly, ignoring the icon. The icon should just be added to the right of the heading after the text is centered. I tried using absolute positioning, but it didn't quite work because I also need the heading to wrap when the browser width gets smaller.

In my example, the entire heading is centered. With the icon being there, it throws off the centering of the text.

html

<div class="container">
  <div class="wrapper">
    <div class="image"></div>
      <div class="heading">
        <span class="title">racecar racecar racecar</span>
        <span class="fa fa-lg fa-car">
        </span>
      </div>
      <div class="description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tortor dolor, varius a convallis ut, tincidunt non turpis. Nam gravida.
      </div>
  </div>
  <div class="wrapper">
    <div class="image"></div>
      <div class="heading">
        <span class="title">kayak kayak kayak</span>
        <span class="fa fa-lg fa-car">
        </span>
      </div>
      <div class="description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque euismod efficitur. Quisque vitae gravida dolor. Fusce et dui quis arcu sagittis sodales. Vivamus tincidunt orci et neque pulvinar, a aliquam diam tristique. Curabitur lacinia nibh est, id cursus ligula mollis eu. Nullam suscipit nisi vel euismod bibendum. Duis congue.
      </div>
  </div>
  <div class="wrapper">
    <div class="image"></div>
      <div class="heading">
        <span class="title">rotor rotor rotor</span>
        <span class="fa fa-lg fa-car"></span>
      </div>
      <div class="description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Fusce et dui quis arcu sagittis sodales. Vivamus tincidunt orci et neque pulvinar, a aliquam diam tristique. Curabitur lacinia nibh est, id cursus ligula mollis eu. Nullam suscipit nisi vel euismod bibendum. Duis congue.
      </div>
  </div>
</div>

css

.wrapper {
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image {
  height: 100px;
  width: 100px;
  background-color: blue;
  border-radius: 65px;
}

.title {
  font-size: 50px;
}

.description {
  padding: 15px;
}

jsfiddle

user4584963
  • 2,403
  • 7
  • 30
  • 62
  • 1
    Since a flex container aligns items by distribution of space, when you have an item on just one side, this creates an imbalance, throwing a centered sibling off center. One solution would be to create a duplicate of the icon, put in on the opposite (left) side with `visibility: hidden`. This will balance things out. Here's a full explanation and other options: http://stackoverflow.com/q/38948102/3597276 – Michael Benjamin Dec 03 '16 at 16:50
  • See my updated answer. – Carl Edwards Dec 03 '16 at 16:53
  • Do you need to use flexbox, or would something else be fine too (if it worked)? Also, where would you want the icon to end up if the text wrapped to 2 lines? – andi Dec 03 '16 at 19:25
  • @andi I need the icon to always be at the end of the heading text. I also would like for the text to remain exactly centered when wrapped to 2 lines (but I feel like this may not be possible) – user4584963 Dec 03 '16 at 23:08

2 Answers2

1

Your question is a little bit misleading. Your real issue is happening inside heading, thai is not a flex element.

You can just add a margin-left of the same size of the image to this element:

.heading {
  margin: 0px 30px;
  text-align: center;
  position: relative;
}

.fa {
  position: absolute;
  right: -30px;
  top: 30px;
}

.wrapper {
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.image {
  height: 100px;
  width: 100px;
  background-color: blue;
  border-radius: 65px;
}
.title {
  font-size: 50px;
}
.description {
  padding: 15px;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
  <div class="wrapper">
    <div class="image"></div>
    <div class="heading">
      <span class="title">racecar racecar racecar</span>
      <span class="fa fa-lg fa-car">
        </span>
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tortor dolor, varius a convallis ut, tincidunt non turpis. Nam gravida.
    </div>
  </div>
  <div class="wrapper">
    <div class="image"></div>
    <div class="heading">
      <span class="title">kayak kayak kayak</span>
      <span class="fa fa-lg fa-car">
        </span>
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque euismod efficitur. Quisque vitae gravida dolor. Fusce et dui quis arcu sagittis sodales. Vivamus tincidunt orci et neque pulvinar, a aliquam diam tristique. Curabitur lacinia
      nibh est, id cursus ligula mollis eu. Nullam suscipit nisi vel euismod bibendum. Duis congue.
    </div>
  </div>
  <div class="wrapper">
    <div class="image"></div>
    <div class="heading">
      <span class="title">rotor rotor rotor</span>
      <span class="fa fa-lg fa-car"></span>
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et dui quis arcu sagittis sodales. Vivamus tincidunt orci et neque pulvinar, a aliquam diam tristique. Curabitur lacinia nibh est, id cursus ligula mollis eu. Nullam suscipit nisi vel euismod
      bibendum. Duis congue.
    </div>
  </div>
</div>
vals
  • 61,425
  • 11
  • 89
  • 138
  • Such a simple answer and looks great except for when I make the browser width narrower which causes a word wrap. I forgot to add `text-align: center` to `.heading`. I am doubtful, but is it possible to maintain exact centering of text after word-wrap occurs? – user4584963 Dec 03 '16 at 22:46
  • I have added text align, and positioned absolute the image. The alignment can be modified to better suit the result that you want – vals Dec 04 '16 at 19:38
0

You can solve this by setting the .fa inside the .heading to float right and have a negative right margin (the same of the font-size of the element):

.heading .fa {
  float: right;
  margin-right: -1.33333333em;
  margin-top: -30px;
}

I also needed to set the margin-top to make sure the element is positioned correctly.

Just for the example - I added display:none on hover to show that the icon is not affecting the centering of the text. You should remove it :)

Here is a working example:

.wrapper {
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image {
  height: 100px;
  width: 100px;
  background-color: blue;
  border-radius: 65px;
}

.title {
  font-size: 50px;
}

.description {
  padding: 15px;
}
.heading .fa {
  float: right;
  margin-right: -1.33333333em;
  margin-top: -30px;
}
.heading:hover .fa {
  display: none;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
  <div class="wrapper">
    <div class="image"></div>
    <div class="heading">
      <span class="title">racecar racecar racecar</span>
      <span class="fa fa-lg fa-car">
        </span>
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tortor dolor, varius a convallis ut, tincidunt non turpis. Nam gravida.
    </div>
  </div>
  <div class="wrapper">
    <div class="image"></div>
    <div class="heading">
      <span class="title">kayak kayak kayak</span>
      <span class="fa fa-lg fa-car">
        </span>
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque euismod efficitur. Quisque vitae gravida dolor. Fusce et dui quis arcu sagittis sodales. Vivamus tincidunt orci et neque pulvinar, a aliquam diam tristique. Curabitur lacinia
      nibh est, id cursus ligula mollis eu. Nullam suscipit nisi vel euismod bibendum. Duis congue.
    </div>
  </div>
  <div class="wrapper">
    <div class="image"></div>
    <div class="heading">
      <span class="title">rotor rotor rotor</span>
      <span class="fa fa-lg fa-car"></span>
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et dui quis arcu sagittis sodales. Vivamus tincidunt orci et neque pulvinar, a aliquam diam tristique. Curabitur lacinia nibh est, id cursus ligula mollis eu. Nullam suscipit nisi vel euismod
      bibendum. Duis congue.
    </div>
  </div>
</div>
Dekel
  • 60,707
  • 10
  • 101
  • 129
  • Thanks for the answer. It looks great until I make the make the width of the browser smaller. When the heading wraps it becomes broken as the icon doesn't stay at the end of the heading. – user4584963 Dec 03 '16 at 22:38
  • You would need to decide what to do when the screen is smaller. Perhaps change the font-size? – Dekel Dec 03 '16 at 22:47