使用弹性框如何在 div 下居中文本
Posted
技术标签:
【中文标题】使用弹性框如何在 div 下居中文本【英文标题】:Using flex box how can I center text under a div 【发布时间】:2018-11-24 16:33:39 【问题描述】:我正在尝试使用 flexbox 将文本置于圆形 div 下,但我无法弄清楚。我的目标是在圆圈中有图标,下面有文字作为标题,但 h2 最终出现在圆圈旁边,我不知道如何将它放在圆圈的底部。感谢您的帮助!
html,
body
margin: 0;
padding: 0;
width: 100%;
.flex-container
display: flex;
flex-wrap: wrap;
width: 1000px;
align-content: space-between;
align-tems: center;
justify-content: center;
position: absolute;
.circle
border-radius: 50%;
background: #252525;
width: 150px;
height: 150px;
border: 10px solid #69bf4a;
margin: 20px;
.flex-container>div:hover
background-color: #69bf4a;
h2
position: absolute;
display: inline;
flex-direction: column;
justify-content: flex-start;
<div class="flex-container">
<div class="circle"></div>
<div>
<h2>T-SHIRTS</h2>
</div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
【问题讨论】:
欢迎来到 Stack Overflow。在下面查看我的答案,单击运行 sn-p 并在全屏中查看。如果成功,请单击答案旁边的勾选按钮以接受它。如果没有,请单击add a comment
链接并告诉我到底缺少什么。 :)
把你的代码变成了一个 sn-p,我注意到一个规则拼写错误:align-items
【参考方案1】:
在 flex-box 视图中不能有任意元素。所以我建议你给每个 flex 元素一个包装器:
<div class="flex-wrap">
<div class="circle"></div>
<div><h2>T-SHIRTS</h2></div>
</div>
现在,回到样式,如果您希望它们具有相同的大小,请使用以下方式:
html, body
margin: 0;
padding: 0;
.flex-container
display: flex;
flex-wrap: wrap;
width: 1000px;
align-content: space-between;
align-items: top;
justify-content: center;
.circle
border-radius: 50%;
background: #252525;
width: 150px;
height: 150px;
border: 10px solid #69bf4a;
margin: 20px;
.flex-container > div:hover
background-color: #69bf4a;
h2
text-align: center;
<div class="flex-container">
<div class="flex-wrap">
<div class="circle"></div>
<div><h2>T-SHIRTS</h2></div>
</div>
<div class="flex-wrap">
<div class="circle"></div>
</div>
<div class="flex-wrap">
<div class="circle"></div>
</div>
<div class="flex-wrap">
<div class="circle"></div>
</div>
<div class="flex-wrap">
<div class="circle"></div>
</div>
<div class="flex-wrap">
<div class="circle"></div>
</div>
<div class="flex-wrap">
<div class="circle"></div>
</div>
<div class="flex-wrap">
<div class="circle"></div>
</div>
</div>
预览
为了说明文本居中,请参见:
【讨论】:
太好了,我认为您解决了我的问题。谢谢!!【参考方案2】:试试这个。
html, body
margin: 0;
padding: 0;
width: 100%;
.flex-container
display: flex;
flex-wrap: wrap;
width: 1000px;
align-content: space-between;
align-tems: center;
justify-content: center;
position: absolute;
.circle
border-radius: 50%;
background: #252525;
width: 150px;
height: 150px;
border: 10px solid #69bf4a;
margin: 20px;
text-align: center;
.flex-container >div:hover
background-color: #69bf4a;
h2
margin-top: 170px;
<div class="flex-container">
<div class="circle"><h2>T-SHIRTS</h2></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
【讨论】:
你到底做了什么改变?我的意思是,一个解释会很好,而不是仅仅使用这个...... 添加了 text-align: center;到圈子类,将 h2 移入圈子 div 并修改 h2 css。【参考方案3】:我认为这是关于我将如何处理这个问题。希望对您有所帮助。
<div class="flex-container">
<div class="flex-item">
<div class="circle"></div>
<h2>T-SHIRTS</h2>
</div>
<div class="flex-item">
<div class="circle"></div>
<h2>T-SHIRTS</h2>
</div>
<div class="flex-item">
<div class="circle"></div>
<h2>T-SHIRTS</h2>
</div>
<div class="flex-item">
<div class="circle"></div>
<h2>T-SHIRTS</h2>
</div>
<div class="flex-item">
<div class="circle"></div>
<h2>T-SHIRTS</h2>
</div>
<div class="flex-item">
<div class="circle"></div>
<h2>T-SHIRTS</h2>
</div>
<div class="flex-item">
<div class="circle"></div>
<h2>T-SHIRTS</h2>
</div>
<div class="flex-item">
<div class="circle"></div>
<h2>T-SHIRTS</h2>
</div>
<div class="flex-item">
<div class="circle"></div>
<h2>T-SHIRTS</h2>
</div>
</div>
html, body
margin: 0;
padding: 0;
width: 100%;
.flex-container
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
align-content: space-between;
align-items: center;
justify-content: center;
.flex-item
-webkit-flex: 1 1 100px;
flex: 1 1 100px;
padding: 25px 45px;
text-align: center;
.circle
border-radius: 50%;
background: #252525;
width: 150px;
height: 150px;
border: 10px solid #69bf4a;
margin: 20px auto;
.circle:hover
background-color: #69bf4a;
【讨论】:
以上是关于使用弹性框如何在 div 下居中文本的主要内容,如果未能解决你的问题,请参考以下文章