试图将图像移动到中心

Question

我正在尝试将图像移动到中心，但图像仅稍微向右移动（而不是中心）。我用过很多方法，但都是徒劳的。

下面给出了代码格式，它是一个单独的div。

<div style="width: 50%">
  <img class="center"src="resources/images/Brewery.png                
   id="functionImage" height="240" alt="#{loginweb.userFunction}"/>
</div>

Answer 1

使图像居中

.img-container-block {
  text-align: center;
}

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

<!-- Block parent element -->
<div class="img-container-block">
  <img src="http://res.cloudinary.com/wfdns6x2g6/image/upload/v1509007989/user_psolwi.png" alt="John Doe">
</div>

<!-- Inline parent element -->
<span class="img-container-inline">
  <img src="http://res.cloudinary.com/wfdns6x2g6/image/upload/v1509007989/user_psolwi.png" alt="John Doe">
</span>

Answer 2

尝试以下源代码

.center{
      margin-left : 50%;
      margin-right : 50%;
      display : block;
 }

如需更多说明，请访问 webpage