Question

我正在尝试将内置链接置于其中。但是我没有运气。这是我的尝试：

HTML：

<div class="help-buttons">
    <a href="#" class="help-button">User Information</a>
    <a href="#" class="help-button">Company Information</a>
    <a href="#" class="help-button">Driver Information</a>
</div>

CSS：

.help-buttons {
  display: block;
  margin: 0 auto;
}
.help-button {
  background: #1795db;
  color: #fff;
  padding: 15px 20px;
  font-family: 'Open sans';
  box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.2);
  margin: 0 30px;
 }

Answer 1

将.html按钮的CSS更改为：

.help-buttons {
    margin: 0 auto;
    text-align:center;
}

jsFiddle example

Answer 2

如果您不想指定宽度 - 或者即使您这样做:) - 您可以将其与display: table和margin: 0 auto;对齐。

Have a fiddle!

CSS

.help-buttons {
    display: table;
    margin: 0 auto;
}

如果您愿意，可以使用按钮上的display: table-cell来增强此功能，以便在视口宽度过小时不会重叠。

border-collapse:separate;和border-spacing:20px;给他们一些间隔。

Second fiddle!

CSS

.help-buttons {
    display: table;
    margin: 0 auto;
    border-collapse:separate;
    border-spacing:20px;
}
.help-button {
    background: #1795db;
    color: #fff;
    padding: 15px 20px;
    font-family: 'Open sans';
    box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.2);
    margin: 0 30px;
    display: table-cell;
}

中心div带有内联链接元素

2 个答案: