css - 垂直对齐 div 中的 1 行或 2 行链接

Question

我有一个小圆圈，里面有文字(大洲)。 它们可能只有 1 个词“欧洲”，或 2 个词，如“北美”。

我想将它们垂直居中。我的意思是我可以给他们不同的类，但这是通过 CMS 进行的，我希望找到一个使用 CSS 或 JS 的解决方案。

<div class="round"><a href="#">Europe</a></div>

<div class="round"><a href='#'>North America</a></div>

我创建了一个小 jsfiddle 来向您展示问题:

http://jsfiddle.net/fmtqzvy6/

谢谢! 丹尼尔

Answer 1

您可以尝试使用绝对位置使您的链接在圆圈内居中:

.round {
    background-color: rgba(0,0,0,0.5);
    border: 1px solid black;
    border-radius: 30px;
    width: 60px;
    height: 40px;
    text-align: center;
    padding-top: 20px;
    margin-bottom: 20px;
    position:relative;
}
.round a {
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    left:0;
    right:0;
    display:block;
    margin:auto;
}

JSFIDDLE