Question

我对img有疑问。到目前为止，它已经不可能将它移到垂直和水平的中间＆＃34;父元素的值是200px * 200 px div元素。只有style =＆＃34; float：left＆＃34;正在工作，但这只是为了左或右。

<div style="width:200px;height:200px;">
    <a>
        <img src="/resources/warenkorb.png" width="50" height="50" />
    </a> 
</div>

Answer 1

这个问题与CSS而不是JSF有关。不过我对相应的CSS主题进行了快速研究。令人惊讶的是，此任务没有直接的解决方案，您必须使用解决方法。

我找到的最佳解决方法是添加内部 div 以使其正常工作。请参阅以下HTML和CSS示例（我还添加了一些边框以更好地显示 div 尺寸）：

.outer {
  display: table;
  position: absolute;
  height: 200px;
  width: 200px;
  border:1px solid black;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width:120px;
  height:120px;
  border:1px solid red;
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      <div>Your image here</div>
    </div>
  </div>
</div>

请在此处查看原始帖子：How to vertically center a div for all browsers?

将img移动到中间

1 个答案: