Home / Questions / 359025
Accepted
Josep Giner
Asked: 2020-05-26 01:39:39 +0800 CST 2020-05-26 01:39:39 +0800 CST

How can I align two images horizontally?

  • 772

I have a doubt and it is that how can I align two images horizontally since I have been testing it and I can't find a way to do it, if someone can help me I would appreciate it

#foto{
    max-width: 55%;
height: auto;
margin: 20px;
padding: 5px;
display: block;
margin: auto;
}
#foto2{
    max-width: 55%;
height: auto;
margin: 20px;
padding: 5px;
display: block;
margin: auto;
}
html

3 Answers

  1. Best Answer

    You just have to use the property display: flexon the <div>one that contains your two images.

    .contenedor-imagenes {
  display: flex;
}

.contenedor-imagenes img:first-child {
  margin-right: 10px;
}
    <div class="contenedor-imagenes">
  <img src="https://pbs.twimg.com/profile_images/1238517872802045953/BsjqKBhn_400x400.jpg">
  <img src="https://pbs.twimg.com/profile_images/1238517872802045953/BsjqKBhn_400x400.jpg">
</div>

    EDIT

    Added margin to the right of the first image.

    • 1

  2. To begin with I think you shouldn't use max-width : 55%it because if both images reached that max, that would add up to more than 100%, so one image would then be passed down.

    To place an image side by side just putdisplay: inline-bloc

    #foto{
    max-width: 40%;
height: auto;
margin: 20px;
padding: 5px;
display: inline-block;
margin: auto;
}
#foto2{
    max-width: 40%;
height: auto;
margin: 20px;
padding: 5px;
display: inline-block;
margin: auto;
}
    <div>
<img id ="foto" src="https://www.muycomputerpro.com/wp-content/uploads/2019/05/stack-overflow-brecha-seguridad.jpg"/>

<img id ="foto2" src="https://www.muycomputerpro.com/wp-content/uploads/2019/05/stack-overflow-brecha-seguridad.jpg"/>
</div>

    • 1

  3. you can use the grid property just like flex: example with grid:

    <style>
    .contenedor{
  background: #EED0C9;

  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, 100px); 
}
.caja_1{
  width: 100px;
  height: 100px;
  background-color: #76FF54;
  text-align: center;
}
.caja_2{
  width: 100px;
  height: 100px;
  background-color: #E97C2B;
  text-align: center;
}
</style>

<div class="contenedor">
  <div class="caja_1"> caja 1</div>
  <div class="caja_2">caja 2</div>
</div>

    Here the link to codepen

    Example with flex

    <style>
  .contenedor{
      width: 100%;
      display: flex;
    }
    .caja_1{
      background: red;
      height: 100px;
      width: 100px;
    }
    .caja_2{
      background: blue;
      height: 100px;
      width: 100px;
    }
</style>


        <div class="contenedor">
      <div class="caja_1"> caja 1</div>
      <div class="caja_2">caja 2</div>
    </div>

    link here

    • 0