Question

我的网站上有三个要对齐的图像按钮，它们在网站顶部的中心并排排列。这是代码。

图像在div内，但是它们根本没有对齐。

我已经尝试过margin：auto和display：block，但是我在这里是菜鸟，所以我不确定还要做什么。

.buttons {
  height: 100px;
  width: 612px;
  margin: auto auto;
  display: block;
}

<div class="buttons">
  <a href="http://apophis.neocities.org"><img src="HOME.png" class="HOME" title="HOME" alt="HOME"></a>
  <a href=""><img src="INDEX.png" class="INDEX" title="INDEX" alt="INDEX"></a>
  <a href="http://users3.smartgb.com/g/g.php?a=s&i=g36-29888-d9"><img src="GUESTBOOK.png" class="GUESTBOOK" title="GUESTBOOK" alt="GUESTBOOK"></a>
</div>

Answer 1

您可以使用flexbox布局模型将元素居中。像这样：

.buttons {
  height: 100px;
  width: 612px;
  display: flex;
  justify-content: center;
  align-items: center;
}

请参见下面的演示。

.buttons {
  height: 100px;
  width: 612px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f1f1f1;
}

<div class="buttons">
  <a href="http://apophis.neocities.org"><img src="HOME.png" class="HOME" title="HOME" alt="HOME"></a>
  <a href=""><img src="INDEX.png" class="INDEX" title="INDEX" alt="INDEX"></a>
  <a href="http://users3.smartgb.com/g/g.php?a=s&i=g36-29888-d9"><img src="GUESTBOOK.png" class="GUESTBOOK" title="GUESTBOOK" alt="GUESTBOOK"></a>
</div>

Answer 2

如果我理解正确，可以使用

  text-align: center;

请参阅：https://jsfiddle.net/3ao7sqtg/

如何在div中居中/对齐图像？

2 个答案:

请参见下面的演示。