【问题标题】：How can I put an a tag in the middle of a box如何在盒子中间放一个标签
【发布时间】：2017-03-29 00:34:03
【问题描述】：
以下是我创建三个带有链接文本的框的代码。
HTML：
<div class="amount-box">
<div class="25">
<a href="">$25</a>
</div>
<div class="50">
<a href="">$50</a>
</div>
<div class="100">
<a href="">$100</a>
</div>
</div><!-- amount box -->
CSS：
.amount-box{
display: flex;
justify-content: center;
}
.amount-box > div{
width: 50px;
height: 50px;
text-align: center;
padding: 5px;
border: 1px solid black;
border-radius: 10px;
margin: 5px;
}
这是我的小提琴：https://jsfiddle.net/Wosley_Alarico/opztnkx9/1/
有没有更好的方法让我将链接放在框的中间而必须使用 margin-top？
提前致谢
【问题讨论】：
标签：
html
css
flexbox
vertical-alignment
【解决方案1】：
是的，您也可以将相同的flexbox 技术应用于孩子。添加以下css：
.amount-box > div {
display: flex;
justify-content: center;
align-items: center;
}
.amount-box {
display: flex;
justify-content: center;
}
.amount-box > div {
width: 50px;
height: 50px;
text-align: center;
padding: 5px;
border: 1px solid black;
border-radius: 10px;
margin: 5px;
display: flex;
justify-content: center;
align-items: center;
}
<div class="amount-box">
<div class="25">
<a href="">$25</a>
</div>
<div class="50">
<a href="">$50</a>
</div>
<div class="100">
<a href="">$100</a>
</div>
</div><!-- amount box -->
【解决方案2】：
由于您已经在使用flexbox，因此您可以将每个.amount_box > div 也设置为flexbox 并将其设置为align-items: center 以使其垂直对齐 - 请参见下面的演示：
Update fiddle
.amount-box {
display: flex;
justify-content: center;
}
.amount-box > div {
width: 50px;
height: 50px;
text-align: center;
padding: 5px;
border: 1px solid black;
border-radius: 10px;
margin: 5px;
display: flex;
justify-content: center;
align-items: center;
}
<div class="amount-box">
<div class="25">
<a href="">$25</a>
</div>
<div class="50">
<a href="">$50</a>
</div>
<div class="100">
<a href="">$100</a>
</div>
</div>
<!-- amount box -->
【解决方案3】：
如果仅针对这样的一行，您可以尝试一种简单的方法。
.amount-box {
height: 50px;
line-height: 50px;
}
.amount-box{
display: flex;
justify-content: center;
}
.amount-box {
height: 50px;
line-height: 50px;
}
.amount-box > div{
width: 50px;
height: 50px;
text-align: center;
padding: 5px;
border: 1px solid black;
border-radius: 10px;
margin: 5px;
}
<div class="amount-box">
<div class="25">
<a href="">$25</a>
</div>
<div class="50">
<a href="">$50</a>
</div>
<div class="100">
<a href="">$100</a>
</div>
</div><!-- amount box -->
【解决方案4】：
可以使用line-height
.amount-box{
display: flex;
justify-content: center;
}
.amount-box > div{
width: 50px;
height: 50px;
text-align: center;
padding: 5px;
border: 1px solid black;
border-radius: 10px;
margin: 5px;
}
.amount-box a{
line-height: 50px;
}
<div class="amount-box">
<div class="25">
<a href="">$25</a>
</div>
<div class="50">
<a href="">$50</a>
</div>
<div class="100">
<a href="">$100</a>
</div>
</div><!-- amount box -->
也可以试试绝对定位——https://jsfiddle.net/afelixj/opztnkx9/3/
.amount-box{
display: flex;
justify-content: center;
}
.amount-box > div{
width: 50px;
height: 50px;
text-align: center;
padding: 5px;
border: 1px solid black;
border-radius: 10px;
margin: 5px;
position: relative;
}
.amount-box a{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="amount-box">
<div class="25">
<a href="">$25</a>
</div>
<div class="50">
<a href="">$50</a>
</div>
<div class="100">
<a href="">$100</a>
</div>
</div><!-- amount box -->
【解决方案5】：
一种选择是对内部 DIV 也使用 Flexbox 方法。直接粘贴
display: flex;
justify-content: center;
align-items: center;
发送至您的.amount-box > divselector。
【解决方案6】：
Display flex 是您回答的最佳解决方案。
Codepen：http://codepen.io/elicohenator/pen/rWLKWr
HTML：
<div class="container">
<h1>Abs aligned :)</h1>
</div>
CSS：
.container {
width: 100%;
height: 350px;
background-color: #e2e2e2;
display: flex;
align-items: center;
justify-content: center
}
【解决方案7】：
display: flex 的答案当然很棒，但没有其他替代方案那么好的浏览器支持（IE 有一些错误，在 IE
如果文本限制为一行，您可以简单地使用line-height 将文本垂直居中。如果行高 = 内容高度，则文本将居中。即使在相当旧的浏览器上也应该可以使用。
.amount-box > div{
line-height:50px;
}
如果您需要多行，则可以使用display: table;，如css-tricks 所示
从那个页面：
HTML：
<div class="something-semantic">
<div class="something-else-semantic">
Unknown stuff to be centered.
</div>
</div>
CSS
.something-semantic {
display: table;
width: 100%;
}
.something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: middle;
}
【解决方案8】：
创建链接display:inline-block 以使用margin-top
.amount-box a {
display: inline-block;
line-height: 20px;
margin: 15px 0;
}
【解决方案9】：
这里是 sn-p -试试这个
.amount-box{
display: flex;
}
.amount-box > div{
width: 50px;
height: 50px;
padding: 5px;
border: 1px solid black;
border-radius: 10px;
margin: 5px;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}
<div class="amount-box">
<div class="25">
<a href="">$25</a>
</div>
<div class="50">
<a href="">$50</a>
</div>
<div class="100">
<a href="">$100</a>
</div>
</div><!-- amount box -->