html – 使锚标签填充父Flex元素的100%高度和宽度,同时垂直和水平居中

html – 使锚标签填充父Flex元素的100%高度和宽度,同时垂直和水平居中,第1张

概述我有一个使用flexbox构建的布局,但有一个方面我似乎无法开始工作. 我有面板,其中有锚标签,我想垂直和水平居中,但我希望锚标签是面板宽度和高度的100%,这样当你点击面板中的任何地方它会链接你,而不是单击链接文本. 这是面板的HTML: <div class="panel--link panel--one"> <a href="#" class="link"> Pane 我有一个使用flexBox构建的布局,但有一个方面我似乎无法开始工作.

我有面板,其中有锚标签,我想垂直和水平居中,但我希望锚标签是面板宽度和高度的100%,这样当你点击面板中的任何地方它会链接你,而不是单击链接文本.

这是面板的HTML:

<div >    <a href="#" >        Panel 1    </a></div>

和SCSS:

.panel {    Box-sizing: content-Box;    flex: 1;    border: 3px solID #fff;    padding: 0px;    text-align: center;}.panel--link {    @extend .panel;    display: flex;      flex: 1;    justify-content: center;    align-items: center;    a.link {        text-decoration: none;        color: #fff;        text-transform: uppercase;        Font-weight: 600;        Font-size: 1rem;        letter-spacing: 3px;        flex: 1;    }}

请参阅我的Codepen了解整个布局,以便您更好地理解它!

http://codepen.io/zauber/pen/BpRJQG

谢谢您的帮助

解决方法 不要害怕,让锚定一个弹性箱……

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

你应该添加align-items:stretch到锚的父级.

总结

以上是内存溢出为你收集整理的html – 使锚标签填充父Flex元素的100%高度和宽度,同时垂直和水平居中全部内容,希望文章能够帮你解决html – 使锚标签填充父Flex元素的100%高度和宽度,同时垂直和水平居中所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:http://outofmemory.cn/web/1047443.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-25
下一篇2022-05-25

随机推荐

发表评论

登录后才能评论

评论列表(0条)

    保存