html - 在 Center 上调整对象，仅当我确定宽度时才有效

Question

目前我正在处理一些图像，我希望它们位于页面的中心所以我使用 margin-left 和 margin-right 设置为 auto 以使其居中。 这就是问题所在:

当我让浏览器找到宽度时它不起作用，如果我将宽度设置为自动， 它会在页面的左侧

此问题会导致责任问题，并使页面与 Retina 不兼容 这是我的 HTML 代码:

<div class="lang">
<a href="http://en.devcom.ir"><img src="english.png" title="Visit Our English Community" /></a><a><img id="shw" onClick="document.getElementById('box').style.display= 'block'" src="persian.png"/>
</div>

和 CSS 类:

.lang {
margin-left:auto;
margin-right:auto;
width:96px;
height:32px;
margin-bottom:3px;
}

Answer 1

您可以使用 Css flex 实现，如下所示:

.lang {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

<div class="lang">
  <a href="http://en.devcom.ir"><img src="english.png" title="Visit Our English Community" /></a>
  <a href="#"><img id="shw" onClick="document.getElementById('box').style.display= 'block'" src="persian.png"/></a>
</div>

对于水平居中对齐:

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

<div class="lang">
    <a href="http://en.devcom.ir"><img src="english.png" title="Visit Our English Community" /></a>
    <a href="#"><img id="shw" onClick="document.getElementById('box').style.display= 'block'" src="persian.png"/></a>
</div>