Flexbox don't display items in a row

Question

Fast question. I'm trying to use flex...

<div class="cont">
    <div class="1">
        <img src="sm1.png" alt="1" title="1" /> short_texttexttext
    </div>
    <div class="2">
        <img src="sm2.png" alt="2" title="2" /> short_texttexttext
    </div>
</div>

to achieve effect like on the image...

just center, center but flex 'merge' image and text as one item:

IMG text

and I want:

IMG text | IMG text (centered)

The only option is to add additional divs? No way! Any ideas?

@Hunter Turner you did assume good. It was css mistake (wrong class name). But [at]Sebastian Brosch provide a good solution so maybe somebody will make use of this mistake. — webmasternewbie, Feb 01 '17 at 23:59

score 2 · Accepted Answer · edited May 23 '17 at 11:45

You can try one of the following solutions:

Hint: class names starting with numbers are not allowed in CSS. So you should rename the classes 1 and 2. More information here: https://stackoverflow.com/a/449000/3840840

solution #1 (text next to the image):

.cont {
  background:yellow;
  padding:20px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:row;
}
.d1, .d2 {
  background:red;
  margin:10px;
}

<div class="cont">
  <div class="d1">
    <img src="http://placehold.it/100x100" alt="1" title="1" /> short_texttexttext
  </div>
  <div class="d2">
    <img src="http://placehold.it/100x100" alt="2" title="2" /> short_texttexttext
  </div>
</div>

solution #2 (text under the images):

.cont {
  background:yellow;
  padding:20px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:row;
}
.d1, .d2 {
  background:red;
  margin:10px;
  text-align:center;
}

<div class="cont">
  <div class="d1">
    <img src="http://placehold.it/100x100" alt="1" title="1" /><br/>
    short_texttexttext
  </div>
  <div class="d2">
    <img src="http://placehold.it/100x100" alt="2" title="2" /><br/>
    short_texttexttext
  </div>
</div>

LoL I just discovered that my css had wrong name... paymets not payments... flex is working fine now - just as it should from the beginning. I thought I was doing something wrong. Thank you for providing nice solutions! Both are working fine. Marked as accepted answer. — webmasternewbie, Feb 01 '17 at 23:56

Flexbox don't display items in a row

1 Answers1