Question

我希望将2张图像水平放置在页面中间，但它们会一直垂直堆叠

 .img-center{
 display:inline-block;}
	
 .img{
	text-align:center;}

   <div class="img-center">
 <div class="img">	 <img  src="Friedrich_Nietzsche.jpg"  width="300px" height="200px"/> </div>
 <div class="img">	 <img src="ayn-rand.jpg" width="300px" height="200px"/>  </div>
 </div>

Answer 1

您可以使用flexboxes实现这一目标：

.img-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

此样式会将div.img水平放置在div.img-center

的中心

Answer 2

css的微小变化。请试试。

.img-center {
    display: inline-block;
    width: 100%;
    text-align: center;
}
.img {
    text-align: center;
    display: inline-block;
}

Answer 3

以下是解决方案：

＆＃13;

.img-center {
  display: inline-block;
  width: 100%;
  text-align: center;
}
.img {
  text-align: center;
}

＆＃13;

<div class="img-center">
  <div class="img">
    <img src="Friedrich_Nietzsche.jpg" width="300px" height="200px" />
  </div>
  <div class="img">
    <img src="ayn-rand.jpg" width="300px" height="200px" />
  </div>
</div>

＆＃13;

Answer 4

你想要这样的东西吗？

外框告诉内部内容居中的主要内容。

＆＃13;

 .img-center{
   width:100%;
   text-align:center;
 }
	
 .img{ 
   display:inline-block;
 }

＆＃13;

   <div class="img-center">
 <div class="img">	 <img  src="Friedrich_Nietzsche.jpg"  width="300px" height="200px"/> </div>
 <div class="img">	 <img src="ayn-rand.jpg" width="300px" height="200px"/>  </div>
 </div>

＆＃13;

＆＃13; 另一种方法是，如果你使用margin：auto，但在这种情况下你需要将图像放在一个div中。

＆＃13;

.img-center{
       width:100%;
       text-align:center;
     }
    	
     .img{ 
       display:block;
        margin: auto;
     }

＆＃13;

<!-- begin snippet: js hide: false console: true babel: false -->
<div class="img-center">
 <div class="img">
   <img  src="Friedrich_Nietzsche.jpg"  width="300px" height="200px"/> 
   <img src="ayn-rand.jpg" width="300px" height="200px"/>  </div>
 </div>

＆＃13;

Answer 5

与您提供的其他解决方案相比，您的css非常简单，可以与更广泛的浏览器兼容。

＆＃13;

.img-center{
   margin: 0 auto;
  width: auto;
}
.img{
  display: inline-block;
}

＆＃13;

<div class="img-center">
 <div class="img">	 <img  src="Friedrich_Nietzsche.jpg"  width="300px" height="200px"/> </div>
 <div class="img">	 <img src="ayn-rand.jpg" width="300px" height="200px"/>  </div>
 </div>

＆＃13;

Answer 6

这应该做的技巧位置：相对;左：50％;和transform：translate（-50％）;

＆＃13;

 .img-center {
 position: relative;
 left: 50%;
 transform: translate(-50%);
 }
 .img {
 display: inline-block;
 }

＆＃13;

   <div class="img-center">
 <div class="img">	 <img  src="Friedrich_Nietzsche.jpg"  width="300px" height="200px"/> </div>
 <div class="img">	 <img src="ayn-rand.jpg" width="300px" height="200px"/>  </div>
 </div>

＆＃13;

Answer 7

text-align：center;这不是一个很好的方法。

在图片周围放置一个div，例如：

<div id="centre">
<img src="path">
</div>

在你的css中，将div设置为图像的高度和宽度，并将边距设置为0，例如：

centre{
width: imgwidth;
height: imgheight;
margin-left: auto;
margin-right: auto;
}

中心2 horizantol图像

7 个答案: