Question

我的网页上的Div中有一个Img，图像显示在div中，但是对齐关闭取决于浏览器的宽度。

这是我的代码：

<div class="w3-row" style="100%; background-color: #fff; margin-top: 5px; height: 100px; padding: 5px;">
    <div class="w3-col w3-container w3-green" style="width: 15%; height: 100%;">
        <div>
            <img class="" src="../images/Joanne.jpg" alt="Chania" style="height: 80px; display: block;  margin-left: auto;  margin-right: auto;">
        </div>
    </div>
    <div class="w3-col w3-container w3-red" style="width: 85%; height: 100%;">

    </div>
</div>

我想知道是否有一种方法可以垂直和水平地对齐Div内的图像，也可能有圆角的图像。

我已经四处寻找，但我没有尝试任何工作，我想通过将左边和右边的边距设置为'auto'可以解决我的问题，但是当我调整浏览器大小时图像仍然关闭。

感谢任何帮助或建议。

演示： https://jsfiddle.net/jjxbm7j7/

Answer 1

对于圆角图像 - 使用border-radius属性

对于垂直居中的图像 - 使用display：flex和align-items：居中于具有指定高度的图像的父元素。

对于水平居中的图像 - 显示：flex和justify-content：居中于具有指定宽度的图像的父元素。但是，对于您的示例，我使用margin：auto，因为它实际上更简单。

有关flex内容的更多信息，请单击此处：http://www.w3schools.com/css/css3_flexbox.asp

它应该是这样的：

.image {
  border-radius: 50px;
}
.w3-col.w3-container.w3-green {
  display: flex;
  align-items: center;
  margin: auto;
}
.w3-row {
  border: 1px solid #aaa;
}

<div class="w3-row" style="100%; background-color: #fff; margin-top: 5px; height: 100px; padding: 5px;">
  <div class="w3-col w3-container w3-green" style="width: 15%; height: 100%;">
    <div>
      <img class="image" src="http://s33.postimg.org/vnc0xbztb/Joanne.jpg

" alt="Chania" style="height: 80px; display: block;  margin-left: auto;  margin-right: auto;">
    </div>
  </div>
  <!--<div class="w3-col w3-container w3-red" style="width: 85%; height: 100%;">

  </div>-->
</div>

为了清楚起见，我添加了1px border属性。

Answer 2

使用 transform：scale（）

在DIV中完美居中您的图像

我在里面创建了一个框，我已经放置了你的图像，以显示如何将图像置于 div（class =＆＃34; box＆＃34;）中。

body{
  width: 100%;
  height: 100vh;
  margin: 0;
}

.w3-row {
  display: flex; //flexBox
  align-items: center;
  justify-content: center;
  flex-direction: column; //Works as a Stack i.e Image at the Top and Description at the bottom
}

使用CSS转换缩放图像

.image{
  width: 100%;
  height: auto;
  transform: scale(.5); //change the scale value to change size of the Image 0<scale<1
}

对于圆角图像

.img-rounded{
  border-radius: 50%
}

工作小提琴：https://jsfiddle.net/rittamdebnath/jjxbm7j7/3/

Answer 3

在任何事情之前它都不是编写内联CSS的好方法，但无论如何你可以在sudo元素上使用垂直对齐方式（之后），就像这样

＆＃13;

.image {
    border-radius: 50px; //adjust yourself
    display: inline-block;
    vertical-align: middle;
  
}

.w3-col.w3-container.w3-green{
   
    text-align:center;
    height:100px;
   border:1px solid;
   width:100%;
}
.w3-col.w3-container.w3-green:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

＆＃13;

<div class="w3-row" style="100%; background-color: #fff; margin-top: 5px; height: 100px; padding: 5px;">
    <div class="w3-col w3-container w3-green" style="width: 15%; margin:auto;">

            <img class="image" src=" http://s33.postimg.org/vnc0xbztb/Joanne.jpg" alt="Chania" style="height: 80px;  ">

    </div>
    <div class="w3-col w3-container w3-red" style="width: 85%; height: 100%;">

    </div>
</div>

＆＃13;

CSS - 中心和圆形Img Inside Div

3 个答案:

使用 transform：scale（）