Question

我有一些链接：

<div class="splash_button_row">
        <span>
        <a href="www.google.com" class="splash_button">label 4 label 4 label 4 </a>
        <a href="www.google.com" class="splash_button">label 2</a>
        <a href="www.google.com" class="splash_button">label 5 label 5label 5</a>
        <a href="www.google.com" class="splash_button">label 5 label 5label 5label 5 label 5label 5</a>
        </span>
</div>

和一堆.css一样：

.splash_button {
background: linear-gradient(to bottom, #3498DB, #2980B9) repeat scroll 0% 0% #3498DB;
border-radius: 30px;
text-shadow: 6px 4px 4px #666;
box-shadow: 2px 2px 3px #666;
font-family: Georgia;
color: #FFF;
padding: 10px 20px;
border: 2px solid #216E9E;
text-decoration: none;
display: inline-block;
margin: 10px;
white-space: normal !important;
word-wrap: break-word;
max-width: 130px !important;
text-align: center;
font-size: 20px;
height: 65px;
vertical-align: middle;
}

这里的关键点是：

height: 65px;
vertical-align: middle;

这两个属性似乎在互相争斗。如果我设置vertical-align: middle;文本全部对齐，并且填充均匀地绘制在它周围（这就是我想要的）。但是当我设置height: 65px;以使所有按钮的大小相同时，文本似乎被推到了按钮的顶部。

如何让所有按钮具有相同（设置）尺寸，同时使其中的文字垂直对齐到“按钮”的中心？

编辑：

我已阅读this question，但它没有回答我的问题。我的按钮有多行，所以行高的技巧不起作用，我的按钮需要是内嵌元素，所以flex的技巧不起作用。我的按钮也需要间隔，但桌面解决方案似乎阻碍了 - 但我还在玩这个。

Answer 1

将显示更改为table-cell以使垂直aligm中间工作。

＆＃13;

.splash_button_row {
  display: table;
  border-collapse: separate;
  border-spacing: 15px;
}
.splash_button {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 34;
  -moz-border-radius: 34;
  border-radius: 34px;
  text-shadow: 6px 4px 4px #666666;
  -webkit-box-shadow: 2px 2px 3px #666666;
  -moz-box-shadow: 2px 2px 3px #666666;
  box-shadow: 2px 2px 3px #666666;
  font-family: Georgia;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  border: solid #216e9e 2px;
  text-decoration: none;
  display: table-cell;
  /* TABLE-CELL */
  border: solid transparent 0 10px;
  margin: 10px;
  white-space: normal !important;
  word-wrap: break-word;
  max-width: 130px !important;
  text-align: center;
  vertical-align: middle;
  height: 65px;
  /* ADD HEIGHT*/
}

＆＃13;

<div class="splash_button_row">
 <span>
	<a href="www.google.com" class="splash_button">label 4 label 4 label 4 </a>
    <a href="www.google.com" class="splash_button">label 2</a>
	<a href="www.google.com" class="splash_button">label 5 label 5label 5</a>
    <a href="www.google.com" class="splash_button">label 5 label 5label 5label 5 label 5label 5</a>
</span>
</div>

＆＃13;

Answer 2

.splash_button {
      background: #3498db;
      background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
      background-image: -moz-linear-gradient(top, #3498db, #2980b9);
      background-image: -ms-linear-gradient(top, #3498db, #2980b9);
      background-image: -o-linear-gradient(top, #3498db, #2980b9);
      background-image: linear-gradient(to bottom, #3498db, #2980b9);
      -webkit-border-radius: 34;
      -moz-border-radius: 34;
      border-radius: 34px;
      text-shadow: 6px 4px 4px #666666;
      -webkit-box-shadow: 2px 2px 3px #666666;
      -moz-box-shadow: 2px 2px 3px #666666;
      box-shadow: 2px 2px 3px #666666;
      font-family: Georgia;
      color: #ffffff;
      font-size: 20px;
      padding: 10px 20px 10px 20px;
      border: solid #216e9e 2px;
      text-decoration: none;                  
      float: none;
      white-space: normal !important;
      word-wrap: break-word;
      max-width: 130px !important;
      text-align: center;
      vertical-align: middle;
      **margin:10px **auto;****
      **display: block;**
      **height: 65px;**
      **display: flex;
      **justify-content: center; /* align horizontal */**
      **align-items: center;****
    }

我的诀窍。看星星。我编辑了我的答案。我想我现在得到了你想要的东西。

Answer 3

在CSS中对齐几乎所有内容的最佳方法。您只需要使用以下课程。

.vertical-center{
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

如何垂直对齐这些CSS按钮上的文本？

3 个答案: