Question

我正在尝试将链接（使用CSS制作为“按钮”）垂直居中，并尝试了许多其他stackoverflow问题中找到的显示选项。保持div的整个宽度似乎无济于事。而在即时通讯上，如何将div附加到页面的顶部？

我尝试使用wrapper div并在使用vertical-align：middle以及其他解决方案的同时将显示模式更改为table-cell，但是没有任何方法可以达到期望的结果。

相关CSS：

.esnav:link,
.esnav:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.esnav:hover,
.esnav:active {
  background-color: green;
  color: white;
}

#buttonParent {
  box-shadow: 10px 10px 8px 10px #888888;
  background-color: white;
  height: 60px;
}

#buttons {}

Answer 1

您可以使用CSS flex属性来使flex-box中的元素居中对齐。有关css-flexbox

的更多信息

#buttonParent {
  box-shadow: 10px 10px 8px 10px #888888;
  background-color: white;
  height: 60px;
  display: flex;
  align-items: center;
}

.esnav:link,
.esnav:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.esnav:hover,
.esnav:active {
  background-color: green;
  color: white;
}

<div id="buttonParent">
  <div id="buttons">

    <a class=esnav href=essays.html target="iMain"> Essays </a>
    <a class=esnav href=genres.html target="iMain"> Genres </a>
    <a class=esnav href=index.html target="iMain"> Index </a>


  </div>
</div>

如何在div上垂直居中放置链接按钮？

1 个答案: