Question

我想设置div＆amp;的图像中心接下来它想要在同一行中设置一个新图像。我不想在下一行设置它。

我试过下面的代码，它在中心设置了第一张图片，而不是旁边的其他图像。它将图像放在下一行。

＆＃13;

div {
  margin: 0 auto;
  overflow: auto;
  background: #0cf;
}

＆＃13;

<div>
  <img src="../images/catchBug.png" alt="img1">
  <img src="../images/signature.png" alt="img2">
</div>

＆＃13;

Answer 1

最简单的方法是将父div text-align: center和position: absolute放到底部img：

＆＃13;

div {
  /*position: relative; optional, depends on the image/divs size*/
  margin: 0 auto;
  overflow: auto;
  background: #0cf;
  text-align: center;
}

.abs {
  position: absolute; /*taken out of the normal document flow; will overflow the parent div since its position is commented out, uncomment if you don't want that*/
}

/* addition */

img {vertical-align: bottom} /*removes bottom margin/whitespace*/

＆＃13;

<div>
  <img src="http://placehold.it/100x100" alt="img1">
  <img src="http://placehold.it/125x125" alt="img2" class="abs">
</div>

＆＃13;

Answer 2

只要您不想要flexbox：

如果您在该行中只有两张图片并且不会有更多，那么您可以像这样硬编码宽度和边距值（但请记住不要在CSS中使用HTML标记，而是＆＃39 ;一个不好的做法）：

img{
  display: inline-block;
  width: __WIDTH_THAT_IS_WIDE_ENOUGH__;
  margin: 0  __WIDTH_THAT_FITS__;
}

Answer 3

我希望我的问题很好。试试这个

.main {
  /*Introduce a fixed width so that your margin: 0 auto; can be put to work. This will center the div*/
  width: 500px;
  margin: 0 auto; 
  overflow: auto; 
  background-color: #0CF;
}

.main img {
  /*Restrict to inline-block for images 
  because https://stackoverflow.com/questions/2402761/is-img-element-block-level-or-inline-level*/
  display: inline-block;
  /*Define a width for the images to keep them in the container 500px*/
  width: 48%;
}

<div class="main">
  <img src='https://images.unsplash.com/45/ZLSw0SXxThSrkXRIiCdT_DSC_0345.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=2e1f776c8e5286b86dca14edbd302243' alt='' />
  <img src='https://images.unsplash.com/photo-1511290156538-08919a92771d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=e4b4923f61050049c740fde4e35dd168' />
</div>

如何在div和amp的水平中心对齐图像在它旁边设置图像？

3 个答案: