将两个并排 divs 与每个 div 的中心的可变长度 link 对齐

Question

我试图并排放置两个 div（红色框），每个红色框内应该有一个边框 link。一个 link 在两行，而第二个 link 在一行。 link 应该位于每个框的中心（水平和垂直），并且两个框也应该完全对齐。

我的代码如下。我必须将 link 设置为 "display: table-cell;" 以保持两个框对齐。如果您有其他解决方案，我在听^^。

* {
margin: 0;
padding: 0;
}

#marketing-button, #prints-button {
 background-color: red;
 text-align: center;
 width: 10em;
 height: 10em;
 display: inline-block;
}

#marketing-link, #prints-link {
 color: white;
 vertical-align: middle;
 display: table-cell;
 float: none;
 font-size: 1em;
 border: yellow solid 2px;
 text-align: center;
 margin-left: auto;
 margin-right: auto;
 padding: .2em;
}

<body>
  <div id="container">
   <div id="marketing-button">
    <a id="marketing-link" href="#">Digital <br />marketing</a>
   </div>
   <div id="prints-button">
    <a id="prints-link" href="#">Prints</a>
   </div>
  </div>
 </body>

谢谢大家！

Answer 1

好的，我找到了解决方案。每个 link 都应设置为显示为行内块，并且应包含在显示为 table 单元格的 div 中。这允许 link 垂直居中。

table 单元格本身应包含在显示为行内块的 div 中。这允许红色框对齐并在它们之间有一个 space。

这是最终代码：

* {
margin: 0;
padding: 0;
}

.container {
 display: inline-block;
}

#marketing-button, #prints-button {
 background-color: red;
 text-align: center;
 width: 10em;
 height: 10em;
 display: table-cell;
 vertical-align: middle;
 margin-right: 20px;
 
}

#marketing-link, #prints-link {
 color: white;
 display: inline-block;
 float: none;
 font-size: 1em;
 border: yellow solid 2px;
 text-align: center;
 padding: .2em;
}

<body>
 
  <div class="container">
   <div id="marketing-button">
    <a id="marketing-link" href="#">Digital <br />marketing</a>
   </div>
  </div>
  <div class="container">
   <div id="prints-button">
    <a id="prints-link" href="#">Prints</a>
   </div>  
  </div>
 
</body>

将两个并排 divs 与每个 div 的中心的可变长度 link 对齐

Align two side by side divs with a variable-length link in the center of each div

alignment

hyperlink