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

Question

正如我在标题中所说。 我必须将内容放在锚标记内。 我可以使用line-height，但是其中一些包含伪元素，因此我正在寻找另一种获取所需内容的方法。 我正在使用flexbox，但有人告诉我这是滥用方式。 你能给我一些建议吗？ 请同时检查代码段。

如果您在这种情况下还有其他详细信息，请告诉我。

提前致谢！

 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

我正在使用flexbox，但有人告诉我这是滥用方式。

不，使用Flexbox来完成此任务不是滥用，这是它出色的一件事。

不这样做的唯一原因是，支持不支持它的非常老的浏览器， Paulie D的答案是另一种选择。

---

更新

如果可以将文本包装在锚点内，也可以使用transform: translate其居中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

使用CSS表格

 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>