我正在尝试使用水平居中的图像和其下的一些按钮来制作页面。 我使用
将图像居中.
.
.
<script type="text/javascript" src="jspm_packages/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="jspm_packages/npm/jquery@2.2.1/dist/jquery.min.js"></script>
.
.
.
这很棒！ 当我试图将一个漂浮的按钮居中时，我遇到了一些问题。我读到，这是不可能的，因此使用：
.Image { display:block; margin:auto; }
和
ul li{display:inline-block;}
虽然有效，但这2个元素似乎没有对齐。看起来这些按钮关闭了几个像素。结果如下：
Screen shot of misalignment when using 2 different methods
我不确定如何正确居中。
答案 0 :(得分：0)
margin: 0 auto;不适用于display: inline-block;。
如果您想使用margin: 0 auto;，请使用display: block或display: table; /* which is not good */
并且，如果您想使用display: inline-block;，请将text-align: center;添加到其父级。
ul {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}
ul li {
display: inline-block;
}<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<小时/> 了解详情
答案 1 :(得分：0)
您可以尝试：
.Image { margin:0px auto; }
如果你还有一个div ......你可以使用这个合作中心.....