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

Posted 2023-03-05

【中文标题】如何在盒子中间放一个标签

【英文标题】：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？ 提前致谢

【参考方案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 -->