Question

我在div中有两个图像，我想在div中水平居中对齐两个图像。我已经尝试但是我无法得到它，任何人都可以帮忙吗？

先谢谢，附上了CSS代码和图片：

alias cacheThis = 'sudo vmtouch -d -L ./'

Answer 1

你可以像下面这样做;

测试 - ＆gt; https://codepen.io/anon/pen/xLOeZR

<强> HTML

<div>
  <img src="https://cdn3.droom.in/photos/images/drm/super-cars.png" width="100">
  <img src="https://cdn3.droom.in/photos/images/drm/super-cars.png" width="100">
</div>

<强> CSS

div{
  width:500px;
  background-color:yellow;
  text-align:center;
  vertical-align:middle;
}

Answer 2

你可以使用flex

来做到这一点

plunker演示：https://plnkr.co/edit/ni0Z7NGNPDxYzgxBTuOd?p=preview

.box {
  width: 500px;
  background: lightgreen;
}

.image-container {
  display: flex;
  justify-content: center;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div class="box">
    lorem ispsium
    <br> <br>
    <br>
    <br>
    <br>
    <br>
    <div class="image-container">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/140x100" />
      </a>
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/140x100" />
      </a>
    </div>

    <br>
    <br>
  </div>
</body>

</html>

如何在CSS中内联两个图像

2 个答案: