我怎样才能使文本居中而不停留在它包含的元素的顶部？

Question

我一直在尝试使用 vertical-align: middle 和 text-align: center 来使按钮居中，但这根本不会影响我的样式，按钮仍然位于顶部。

我不确定为什么没有应用该样式。我可以使用 top: 50%，但这不是真正的中心，具体取决于按钮将包含的文本数量。

#selectmanager-outer {
    width: 200px;
    height: 200px;
    float: left;
    box-sizing: border-box;
    padding: 10px;
}

 #selectmanager-inner {
    height: 150px;
    box-sizing: border-box;
    border: 1px solid #E0E0E0;    
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F5F5F5), to(#FAFAFA));
    background-image: -webkit-linear-gradient(#F5F5F5, #FAFAFA);
    background-image: -moz-linear-gradient(#F5F5F5, #FAFAFA);
    background-image: -o-linear-gradient(#F5F5F5, #FAFAFA);
    background-image: linear-gradient(#F5F5F5, #FAFAFA);
    padding: 10px;
}

<div id='selectmanager-outer'>
    <div id ='selectmanager-inner'>
        <button>Very long button name to test</button>
    </div>
</div>

解决方案： 借助 Akheel K M 的答案，使用位置、百分比和变换。

#selectmanager-outer {
  width: 200px;
  height: 200px;
  float: left;
  box-sizing: border-box;
  padding: 10px;
}

#selectmanager-inner {
  height: 150px;
  box-sizing: border-box;
  border: 1px solid #E0E0E0; 
  border-radius: 30px 30px; 
  background: #F5F5F5;
  background-image: -webkit-linear-gradient(top, #F5F5F5, #FAFAFA);
  background-image: -moz-linear-gradient(top, #F5F5F5, #FAFAFA);
  background-image: -ms-linear-gradient(top, #F5F5F5, #FAFAFA);
  background-image: -o-linear-gradient(top, #F5F5F5, #FAFAFA);
  background-image: linear-gradient(to bottom, #F5F5F5, #FAFAFA);
  padding: 10px;
  position: relative;
}

#selectmanager-inner button {
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translateY(-50%) translateX(-50%);
}

<div id='selectmanager-outer'>
  <div id ='selectmanager-inner'>
    <button>Very long button name to test</button>
  </div>
</div>

Answer 1

你为什么不在 top:50%; 之后尝试 transform: translateY(-50%);？可能无法在旧版浏览器上运行。

Answer 2

如果你得到父容器和按钮的中间，你可以使用margin-top。对于这种情况，请尝试

#selectmanager-inner .buttonclass{
  margin-top:50px;
}

我会对按钮应用 class，这样它就不会影响您站点中的所有按钮。

我怎样才能使文本居中而不停留在它包含的元素的顶部？

How can I center text without it staying at the top it's containing element?

html

css

position

transform