我怎样才能把一个标签放在一个盒子的中间

Question

以下是我创建三个框的代码，其中包含 link 文本。

HTML:

<div class="amount-box">
    <div class="25">
      <a href=""></a>
    </div>
    <div class="50">
      <a href=""></a>
    </div>
    <div class="100">
      <a href="">0</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;
}

这是我的fiddle：https://jsfiddle.net/Wosley_Alarico/opztnkx9/1/

有没有更好的方法让我将 link 放在方框的中间而不得不使用 margin-top？提前致谢

Answer 1

是的，您也可以将相同的 flexbox 技术应用于 children。添加以下 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=""></a>
  </div>
  <div class="50">
    <a href=""></a>
  </div>
  <div class="100">
    <a href="">0</a>
  </div>
</div><!-- amount box -->

Answer 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=""></a>
  </div>
  <div class="50">
    <a href=""></a>
  </div>
  <div class="100">
    <a href="">0</a>
  </div>
</div>
<!-- amount box -->

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=""></a>
    </div>
    <div class="50">
      <a href=""></a>
    </div>
    <div class="100">
      <a href="">0</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=""></a>
</div>
<div class="50">
  <a href=""></a>
</div>
<div class="100">
  <a href="">0</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=""></a>
</div>
<div class="50">
  <a href=""></a>
</div>
<div class="100">
  <a href="">0</a>
</div>
  </div><!-- amount box -->

Answer 5

一种选择是对内部 DIV 也使用 Flexbox 方法。简单粘贴

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

到您的.amount-box > div选择器。

Answer 6

Display flex 是您的答案的最佳解决方案。

代码笔：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 7

display: flex 答案当然很棒，但浏览器支持不如其他选择（IE 有一些错误，IE <= 9 不支持）。

如果文本仅限于一行，您可以简单地使用 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;
}

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=""></a>
    </div>
    <div class="50">
      <a href=""></a>
    </div>
    <div class="100">
      <a href="">0</a>
    </div>
  </div><!-- amount box -->

我怎样才能把一个标签放在一个盒子的中间

How can I put an a tag in the middle of a box

html

css

vertical-alignment

flexbox