html - 当外框居中时无法同时使文本居中

Question

我正在开发移动用户界面，但遇到了 CSS 问题。我有一个移动用户界面的滑动菜单，当用户滑动时，滑动区域中间应该有一个框，框中间应该有一个文本，但是我不能同时做这两个，如果我做一个我失去另一个。

我在同一个 div 中尝试了两个 css 类，然后创建了 2 个 div，但没有按预期工作。框中的文本按预期位于中间，但框向左。

第二个有 2 个内部 div 和 2 个 css 类，与没有 tabCenter 类相同。框在中间，但文本在左上角对齐。

.tabCenter {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.call-button-container {
  margin: auto;
  width: 233px;
  height: 80px;
  vertical-align: middle;
  padding: 10px;
  background: #29A3D8;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-family: lato-bold;
  font-size: 17px;
  color: white;
}

<div class="call-button-container tabCenter" @click="makeCall(true)">Video {{activeCall.to}}
</div>

<div class="call-button-container" @click="startCall(false)">
  <div Class="tabCenter">Call {{activeCall.to}}</div>
</div>

Answer 1

我希望这能解决你的问题...

.call-button-container.tabCenter {
    display: table-cell;
}

.call-button-container {
    display: table;
}

或者您可以使用 .call-button-container:first-child 作为选择器。