为啥我不能将用于关闭模态组件的“a”元素居中？

Posted 2023-03-29

【中文标题】为啥我不能将用于关闭模态组件的“a”元素居中？

【英文标题】：Why can't I center my "a" element which I'm using to close a modal component?为什么我不能将用于关闭模态组件的“a”元素居中？

【发布时间】：2021-11-16 23:38:03

【问题描述】：

我创建了一个“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>

如何垂直居中？

【问题讨论】：

这能回答你的问题吗？ How to center an element horizontally and vertically

【参考方案1】：

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

【参考方案2】：

尝试使用 flexbox 对齐项目。

我补充说：

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

到你的 .close-button 类。

这是结果。

: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>

【参考方案3】：

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

【讨论】：

不是一个好答案，我建议检查一下 flexbox 是如何工作的

改变圆的形状和大小

我明白，但你不能总是使用 flex