在锚标签内垂直对齐而不使用flex

Question

As I said in title. I have to centering content inside an anchor tag. I can use line-height, but some of them contain pseudo element so I am finding another approach to gain what I need. I am using flexbox, but I am told that's abusing way to use. Could you please give me some suggestion? Please check code snippet as well.

If you have any more specific detail in this case, please tell me.

Thanks in advance!

 a { align-items: center; border: 1px solid #fff; background: #000; color: #fff; display: flex; flex-direction: column; height: 80px; justify-content: center; text-decoration: none; width: 120px; } .without-pseudo:before { content: none; } a:hover { background: green; } a:before { content: ':before'; display: block; } 

 <a href="#">text</a> <a href="#" class="without-pseudo">text</a> 

Answer 1

I am using flexbox, but I am told that's abusing way to use.

No, it's not abusive using Flexbox for this task, it's one of the things it does excellent.

The only reason not to, is to support very old browsers that doesn't support it, which Paulie D's answer has an alternative for.

---

Updated

If you can wrap the text inside the anchor, you can also center it using transform: translate

 a { display: inline-block; border: 1px solid #fff; background: #000; color: #fff; height: 80px; text-decoration: none; width: 120px; vertical-align: top; text-align: center; } a span { position: relative; display: inline-block; top: 50%; transform: translateY(-50%); } .without-pseudo span:before { content: none; } a:hover { background: green; } a span:before { content: ':before'; display: block; } 

 <a href="#"><span>text</span></a> <a href="#" class="without-pseudo"><span>text</span></a> 

Answer 2

Use CSS Tables

 a { border: 1px solid #fff; background: #000; color: #fff; display: table-cell; vertical-align: middle; text-align: center; height: 80px; text-decoration: none; width: 120px; } .without-pseudo:before { content: none; } a:hover { background: green; } a:before { content: ':before'; display: block; } 

 <a href="#">text</a> <a href="#" class="without-pseudo">text</a>