CODEWITHSUNDEEP
htmlcss
rodrigo
rodrigo

Reputation: 68

how to align images horizontally?

I tried used display: inline-block and other stuff like changing the width but my images only show to be vertical.

.figure {
  display: inline-block;
}

figure.item {
  color: #676767;
  background-color: #ffffff;
  width: 100%;
  margin: 0;
  text-align: center;
  display: inline-block;
}

.item img {
  width: 100px;
  height: 100px;
  display: inline-block;
}

.caption {
  display: block;
}
<figure class="item">
  <img src="./img/facebook.png" />
  <figcaption class="caption">Facebook</figcaption>
  <img src="./img/insta.png" />
  <figcaption class="caption">Facebook</figcaption>
  <img src="./img/telefone.png" />
  <figcaption class="caption">Facebook</figcaption>
  <img src="./img/email.png" />
  <figcaption class="caption">Facebook</figcaption>
</figure>

Right now the images are showing vertically and with text under. And i need the images to be horizontally with text under they.

Upvotes: 0

Views: 669

Answers (3)

Omer
Omer

Reputation: 3466

Using Flex-box

I make a wrap div for every img and text.

.item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0;
}

.item img {
  width: 100px;
  height: 100px;
  display: inline-block;
}

.caption {
  display: inline-block;
}

.wrap{
    width:100px;
    text-align: center;
}
<figure class="item">
  <div class="wrap">
    <img src="./img/facebook.png" />
    <figcaption class="caption">Facebook</figcaption>
  </div>
  <div class="wrap">
    <img src="./img/facebook.png" />
    <figcaption class="caption">Facebook</figcaption>
  </div>  
  <div class="wrap">
    <img src="./img/facebook.png" />
    <figcaption class="caption">Facebook</figcaption>
  </div>
   <div class="wrap">
    <img src="./img/facebook.png" />
    <figcaption class="caption">Facebook</figcaption>
  </div>
</figure>

Upvotes: 1

nioe
nioe

Reputation: 886

There are several issues with your snippet:

  • The first line .figure is not meant to be a class but a element selector (i.e. .figure !== figure)
  • Block-Elements will be displayed underneath each other by default.

Try to use flex-box. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.row {
  display: flex;
}
<div class="row">
  <figure>
    <img src="./img/facebook.png" />
    <figcaption class="caption">Facebook</figcaption>
  </figure>
  <figure>
    <img src="./img/insta.png" />
    <figcaption class="caption">Facebook</figcaption>
  </figure>
  <figure>
    <img src="./img/telefone.png" />
    <figcaption class="caption">Facebook</figcaption>
  </figure>
  <figure>
    <img src="./img/email.png" />
    <figcaption class="caption">Facebook</figcaption>
  </figure>
</div>

Upvotes: 0

Charlene Vas
Charlene Vas

Reputation: 731

  figure.item {
    color: #676767;
    background-color: #ffffff;
    text-align: center;
  }
  
  
  .item img {
    width: 100px;
    height: 100px;
  }
  
 

figure {
    width: 25%;
    float: left;
    margin: 0;
    text-align: center;
    padding: 0;
}
<figure class="item">
      <img src="./img/facebook.png" />
      <figcaption class="caption">Facebook</figcaption>
    </figure>
    <figure class="item">
      <img src="./img/facebook.png" />
      <figcaption class="caption">Facebook</figcaption>
    </figure>
    <figure class="item">
      <img src="./img/facebook.png" />
      <figcaption class="caption">Facebook</figcaption>
    </figure>
    <figure class="item">
      <img src="./img/facebook.png" />
      <figcaption class="caption">Facebook</figcaption>
    </figure>

Upvotes: 0

Related Questions