Question

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

如果你定位＆＃39;绝对，并添加顶部和底部位置，您可以实现您想要的。

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

Answer 2

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

我所做的是更改width并更改<a>代码的位置

https://jsfiddle.net/mk8xx5zg/

希望这会有所帮助。

在这里，您可以了解有关css中position属性的更多信息： 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/

A great Flexbox tutorial by css-tricks

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

3 个答案: