Question

以下是我的代码，用于创建三个包含链接文本的框。

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？提前致谢

Answer 1

由于您已经在使用flexbox，因此您可以将.amount_box > div中的每一个设为flexbox，并将其align-items: center垂直对齐 - 请参阅下面的演示：< / p>

Update fiddle

＆＃13;

.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;
}

＆＃13;

<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 -->

＆＃13;

Answer 2

是的，您也可以对孩子们应用相同的flexbox技术。添加以下css：

.amount-box > div {
  display: flex;
  justify-content: center;
  align-items: center;
}

＆＃13;

.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;
}

＆＃13;

<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 -->

＆＃13;

Answer 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 -->

Answer 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 -->

Answer 5

display: flex答案当然很棒但是并没有与其他选项一样好的浏览器支持（IE在IE中有一些错误和支持＆lt; = 9）。

如果文字仅限于一行，您只需使用line-height垂直居中。如果行高=内容高度，则文本将居中。这应该适用于相当旧的浏览器。

.amount-box > div{
  line-height:50px;
}

如果您需要多行，则可以使用css-tricks

上显示的display: table;

从该页面开始：

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;
}

Answer 6

一种选择是将Flexbox方法也用于内部DIV。只需粘贴

即可

display: flex;
justify-content: center;
align-items: center;

到.amount-box > div选择器。

Answer 7

显示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
}

Answer 8

建立链接display:inline-block以使用margin-top

.amount-box a {
    display: inline-block;
    line-height: 20px;
    margin: 15px 0;
}

Answer 9

以下是片段 - 试试这个

.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 -->

如何在盒子中间放置一个标签

9 个答案: