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

如何水平对齐两个图像？

  • 772

我有一个疑问，这是我如何水平对齐两个图像，因为我一直在测试它，但我找不到办法，如果有人可以帮助我，我会很感激

#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

    您只需在包含您的两个图像display: flex的那个上使用该属性。<div>

    .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>

    编辑

    在第一张图片的右侧添加边距。

    • 1

  2. 首先，我认为你不应该使用max-width : 55%它，因为如果两个图像都达到了最大值，那加起来会超过 100%，所以一个图像会被传递下去。

    要并排放置图像，只需放置display: 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. 您可以像使用 flex 一样使用 grid 属性：带有 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>

    这里是codepen的链接

    弹性示例

    <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>

    链接在这里

    • 0