集中问题

Question

我正在尝试使用水平居中的图像和其下的一些按钮来制作页面。 我使用

将图像居中

.
.
.
<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

我不确定如何正确居中。

Answer 1

margin: 0 auto;不适用于display: inline-block;。

1. 如果您想使用margin: 0 auto;，请使用display: block或display: table; /* which is not good */

2. 并且，如果您想使用display: inline-block;，请将text-align: center;添加到其父级。

＆＃13;
＆＃13;
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

ul li {
  display: inline-block;
}
＆＃13;
<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
</ul>
＆＃13;
＆＃13;
＆＃13;
<小时/> 了解详情

Center Things

Centering in CSS: A Complete Guide

Answer 2

您可以尝试：

.Image {  margin:0px auto; }

如果你还有一个div ......你可以使用这个合作中心.....