Align items vertically in a div

Question

I have a div with an anchor inside and I want this anchor to take the whole width of the div however, I would like to have the text of the anchor to be centered within the div, it's not working for me. I have tried this code:

  .actions {
    display: -webkit-flex;
    display: flex;
  }
  .action {
    background: #ef5b2b;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 5px;
    text-align: center;
    height: 100px; 
    position: relative;
  }

  .action a {
      display: inline-block;
      height: 100%;
      width: 100%;
      vertical-align: middle;
}

<div class="actions">
  <div class="action-left action">
    <a href="#" style="color: white">Hello 1</a>
  </div>

  <div class="action-right action">
    <a href="#" style="color: white">Hello 2</a>
  </div>
</div>

any help is appreciated.

Why is this closed? Other questions are talking about just text.. I want the anchor tag to take the whole space of the div at the same time.. — B1B, Oct 22 '20 at 00:47

cssyphus · Accepted Answer · 2020-10-22T00:55:33.740

1

Try this:

The .actions container needs to be flex so that the two actions containers will be evenly spaced, side by side.

Each .action container will hold the two anchor containers (which will be 100% height and width). Therefore, the .action containers only need to be width/height 100% themselves.

The a tags within the action containers need to be 100% height/width so that they fill the entire .action container. BUT, to center the text vertically and horizontally, you can use flex so that you can use justify-content: center and align-items:center - which makes the content within them centered both horizontally (justify-content) and vertically (align-items).

.actions {
    width: 100%;
    display: flex;
  }
  .action {
    flex: 1;
    position: relative;
    width: 100%;
    height: 100px; 
    margin: 5px;
    background: #ef5b2b;
  }
  
.action a{
  height:100%;
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="actions">
  <div class="action-left action">
    <a href="#" style="color: white">Hello 1</a>
  </div>

  <div class="action-right action">
    <a href="#" style="color: white">Hello 2</a>
  </div>
</div>

edited Oct 22 '20 at 00:55

answered Oct 22 '20 at 00:48

cssyphus

37,875
18
96
111

Thanks @cssyphus, but the anchor isn't taking the whole width of the div, meaning that the whole area isn't clickable. – B1B Oct 22 '20 at 00:50
OIC, I didn't understand that. Hang on... – cssyphus Oct 22 '20 at 00:51
it's working now, you did update the anchor code? – B1B Oct 22 '20 at 00:54
Yes. *(BTW, If you click the `edited 27 secs ago` link (between the `share/edit/delete/flag` line and the `answered x mins ago` line, you can see the details of each edit - what changed each time.)* – cssyphus Oct 22 '20 at 00:56
Thanks a lot. Appreciate your help. I don't know why they downvoted the questions, this site discourages people from asking, run by psychos. Thanks a lot to you +1 – B1B Oct 22 '20 at 00:58

Align items vertically in a div

1 Answers1