如何在CSS列表中将文本居中？

Question

我有以下CSS列表定义：

a {
    background-color: black;
    display:block;
    border-radius: 50%;
    text-align: center;
    top: 50%;
    left: 50%;
    height: 100px;
    width: 100px;
}

导致这种按钮的原因：

我希望文本位于这些圆圈的中间。有可能吗？

Answer 1

尝试for (var i = 0; i < dishCount; i++) { $(".number-quantity").attr({ "max": number }); } 元素。试试这个。

有效的Codepen示例：https://codepen.io/anon/pen/ePMdrL

collections.Counter

from collections import Counter
def s(s1, s2):
    c1, c2 = Counter(s1), Counter(s2)
    return all(v <= c1.get(k, 0) for k, v in c2.items())

Answer 2

代替display：block;这个：

a {
    /* display:block; <- delete this */
    /* put this instead */
    display:flex;
    align-items:center;
}

参考资料：

https://developer.mozilla.org/en-US/docs/Glossary/Flex

Answer 3

您可以使用line-height属性。 Working Codepen example。

.circle {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 50%;
  background: black;
  color: white;
  text-align: center;
}

Answer 4

您可以使用自定义列表样式，例如：

ul.leaf {
  list-style-image: url('/images/leaf_icon.jpg');
}