如何让我的链接文本不在Div之外运行？

Question

https://jsfiddle.net/LnbcfmL3/

HTML

<div class="Nav">
            <a href="C:\Users\user\Desktop\Computer Science\Rugby_Arguement.html"> Rugby Arguement </a>
        </div>
        <div class="Nav">
            <a href="C:\Users\user\Desktop\Computer Science\Football_Arguement.html"> Football Arguement </a>
        </div>

CSS

.Nav{
position: relative;
display: inline-block;
height: 100px;
width: 200px;
border-radius: 100px / 50px;
border: 2px solid black;
left: 150px;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px /50px;
text-align: center;
background-color: #FF6600;
}
a{
text-align: center;
}

这就是我到目前为止所做的事情，我的椭圆形中的链接文本已经用完了div本身。 我已经尝试了其他问题中建议的事情大约2个小时了，似乎没有任何效果。 提前致谢。

Answer 1

如果你绝对定位'a'，并添加顶部和底部位置，你就可以达到你想要的效果。

a {
position: absolute;
text-align: center;
top: 30px;
left: 40px;
}

Answer 2

看看下面的jsfiddle，看起来怎么样？

我所做的是改变width并改变<a>标签的位置

https://jsfiddle.net/mk8xx5zg/

希望这可以帮助。

在这里，您可以了解有关css中位置属性的更多信息： http ： //www.w3schools.com/css/css_positioning.asp

Answer 3

通过使用display:flex可以实现更加动态的方法

.Nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

通过在父元素上使用上述声明，子元素现在将在垂直和水平方向上居中（无论大小，因此不需要硬定位或大小值）

请参阅更新的小提琴： https ： //jsfiddle.net/LnbcfmL3/1/

css-tricks提供了一个很棒的Flexbox教程