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

概述我有一个使用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

谢谢您的帮助

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

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

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

总结

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

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