如何将锚标记置于父元素内部居中，而锚占据父空间的所有空间

Question

So I'm trying to make an anchor element take up 100% of parent element so that the parent is all clickable and center the text vertically and horizontally inside the parent element. What would be the css to go along with the following HTML to make the above happen?

<ul>
    <li><a>text</a></li>
</ul>

Answer 1

just give it the display:block property, which will cause it to take 100% of it's parent, like so:

 li { background-color:red; } a { background-color:blue; display:block; color:white; width:100%; // not actually necessary, but good practice } 

 <ul> <li><a href="#">text</a></li> </ul> 

Answer 2

You can add CSS display: block; or display:table; properties to anchors for 100% width.

 ul{ list-style-type: none; } li{ width:80%; margin-bottom:20px; } a{ position:relative; line-height: 30px; width:100%; color:#fff; background-color: #666; display:table; padding:5px 10px; } a:hover{ opacity: 0.8; } 

 <ul> <li><a href="#">text 1</a></li> <li><a href="#">text 2</a></li> <li><a href="#">text 3</a></li> </ul> 

Answer 3

There are several ways you can do this. It sort of depends on what CSS you have going on around it, or other things you are trying to accomplish visually.

One thing to remember is that only the <a> itself is clickable. If you only center the anchor inside the <li> , the area around it will not be clickable—only its text will be. In order to make the entire <li> behave as though it is clickable, you need to make the anchor itself fill the entire space within the <li> . Then you can center the text within the anchor.

One way to do this is with flexbox:

li {
  height: 100px; // for example, to demonstrate vertical centering
}

a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

Note: don't use the a selector alone here; this is just for this code snippet. You should probably use a class instead.

FYI, the other answers provided so far don't actually center the text, and don't account for vertical centering.