如何使用 css 选择器居中对齐该元素？答案

【问题标题】：How to center align this element using css selector?如何使用 css 选择器居中对齐该元素？
【发布时间】：2020-05-15 20:54:21
【问题描述】：

尝试将墨水条更改为圆形，但是我已经完成了，但尝试将其居中对齐时遇到了困难。谁能给我一些建议？

.ant-tabs-ink-bar {
  display: flex;
  //align-items: center;
  //vertical-align: middle;
  width: 8px !important;
  height: 8px;
  line-height: 8px;
  border-radius: 50%;
}

【问题讨论】：

只需添加.ant-tabs-ink-bar { left: 28px}
@demkovych 谢谢。然而，我之前尝试过这个，理想情况下这是一个静态对齐，我希望它能够响应。无论标签大小如何，始终居中对齐
寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website OR off-site example doesn't work can I just paste a link。

标签： css layout flexbox css-selectors antd

【解决方案1】：

使用您提供的 CSS，试试这个

.ant-tabs-ink-bar {
  left: 22.5px;
  width: 8px !important;
  height: 8px;
  line-height: 8px;
  border-radius: 50%;
}

【讨论】：

【解决方案2】：

您可以创建一个伪元素。

.ant-tabs-ink-bar {
  display: flex !important;
  justify-content: center;
  height: 8px;
  background-color: transparent;
}
.ant-tabs-ink-bar::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin-bottom: -4px;
  line-height: 8px;
  border-radius: 50%;
  background-color: var(--antd-wave-shadow-color);
}

【讨论】：

【解决方案3】：

只需将其包装在一个容器中，然后为容器提供以下 CSS。

.container{
  display:flex;
  justify-content:center;
}

【讨论】：