How to center text in a list in CSS? - html

Question

I have the following CSS list definition:
a {
background-color: black;
display:block;
border-radius: 50%;
text-align: center;
top: 50%;
left: 50%;
height: 100px;
width: 100px;
}
Which results in this kinds of buttons:
I would like the text to be right in the middle of those circles instead. Is that possible?

Answer 1

Try to span an element. Try this.
Working codepen example: https://codepen.io/anon/pen/ePMdrL
a{
background:black;
color:#fff;
width:100px;
height:100px;
display:inline-block;
text-align:center;
position:relative;
border-radius:100%;
}
a span{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
<span>Link</span>

Answer 2

instead of display:block; this:
a {
/* display:block; <- delete this */
/* put this instead */
display:flex;
align-items:center;
}
reference material:
https://developer.mozilla.org/en-US/docs/Glossary/Flex

Answer 3

You could use the line-height property. 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

You can use custom list style, for instance:
ul.leaf {
list-style-image: url('/images/leaf_icon.jpg');
}