为什么我不能将我用来关闭模态组件的 "a" 元素居中？

Question

我创建了一个“a”元素，单击该元素可将您带到主页并关闭模式。我让它看起来像一个关闭按钮。但是，我似乎无法将其中的“X”垂直居中。我尝试将它包含在“按钮”元素中，但这导致了其他问题。下面是代码：

:root {
  --main-color: #ffc40c;
  --secondary-color: lightyellow;
  --main-red: #d9001d;
  --secondary-red: #ff033e;
  --dark-color: #444;
  --light-color: #fafafa;
}
body {
  font-family: "Source Code Pro", monospace;
  background-color: var(--light-color);
  color: var(--dark-color);
  margin-top: 50px;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  text-shadow: 1px 1px 5px var(--light-color);
}
a {
  text-decoration: none;
}
.close-button {
  height: 30px;
  width: 30px;
  background-color: var(--light-color);
  color: var(--main-red);
  margin-left: 0.5em;
  border: 2px solid var(--main-red);
  border-radius: 50%;
  font-weight: 700;
  text-align: center;
}
.close-modal {
  position: fixed;
  top: 2.8em;
  right: 1.7em;
}

<a class="close-button close-modal" href="#!"> X </a>

如何垂直居中？

Answer 1

尝试使用 flexbox 来对齐项目。

我补充说：

display:flex;
justify-content:center;
align-items:center;

到您的关闭按钮 class。

这是结果。

:root {
  --main-color: #ffc40c;
  --secondary-color: lightyellow;
  --main-red: #d9001d;
  --secondary-red: #ff033e;
  --dark-color: #444;
  --light-color: #fafafa;
}
body {
  font-family: "Source Code Pro", monospace;
  background-color: var(--light-color);
  color: var(--dark-color);
  margin-top: 50px;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  text-shadow: 1px 1px 5px var(--light-color);
}
a {
  text-decoration: none;
}
.close-button {
display:flex;  /*flexbox a.k.a flexible layout */
justify-content:center; /*for horizontally centering*/
align-items:center; /* for vertically centering*/
  height: 30px;
  width: 30px;
  background-color: var(--light-color);
  color: var(--main-red);
  margin-left: 0.5em;
  border: 2px solid var(--main-red);
  border-radius: 50%;
  font-weight: 700;
  text-align: center;
}
.close-modal {
  position: fixed;
  top: 2.8em;
  right: 1.7em;
}

<a class="close-button close-modal" href="#!"> X </a>

Answer 2

您需要为您的 a 标签添加 padding-top: 10px

Answer 3

让这些东西居中的一个超级简单的方法是 display: grid; place-items: center; 尝试将这些属性添加到 .close-button

为什么我不能将我用来关闭模态组件的 "a" 元素居中？

Why can't I center my "a" element which I'm using to close a modal component?

html

css

center

centering