CODEWITHSUNDEEP
cssflexbox
webmasternewbie
webmasternewbie

Reputation: 167

Flexbox don't display items in a row

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...enter image description here

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

IMG text

IMG text

and I want:

IMG text | IMG text (centered)

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

Upvotes: 0

Views: 666

Answers (1)

Sebastian Brosch
Sebastian Brosch

Reputation: 43564

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>

Upvotes: 2

Related Questions