Question

因此，如下所示，我有两个元素：我的名字和无序列表。

我希望两个元素在浏览器窗口中垂直和左右居中（无论窗口的大小。）

我还希望两个元素水平居中排列，这样左边元素的右边和右边元素的左边位于垂直中心线上。

我希望这很清楚！基本上我希望这两个位是左右并在页面上垂直和水平居中。

通过将两个元素向左浮动，然后调整每个元素的边距，我得到了我想要的东西。但也许有更好更精确的方式？

<body>
    <h1>
        My Name
    </h1>

    <ul>
        <li>
            about
        </li>
        <li>
            resume
        </li>
        <li>
            samples
        </li>
        <li>
            blog
        </li>
    </ul>

Answer 1

最好的解决方案是使用inline-block作为标题以及列表和列表元素，将它垂直使用，并使用:before伪元素作为body（或任何其他包装器）将其设置在中间：

working example

<强> HTML

<h1>My Name</h1>
<ul>
   <li>item 1</li>
   <li>item 2</li>
</ul>

<强> CSS

html,
body {
  height: 100%;
}
body {
  margin: 0;
  text-align: center;
}
body:before {
  content: '';
  display: inline-block;
  height: 100%;
}
body:before,
h1,
ul, li {
  display: inline-block;
  vertical-align: middle;
}

如何将两个元素并排垂直对中，然后使其内边距与垂直中心线等距？

1 个答案: