Question

这是html代码，使用Bootstrap 3：

<section class="col-md-12 section2 "> 
  <div class="row">
      <div class="col-xs-10 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
        <button ><a href=""class="sec2Text ">test</a></button>
      </div> 
    </div>
</section>

Css clases：

.section2{
 height:310px;
 max-height:310px;
}

a.sec2Text{
 color:#000;
 font-size:55px;
}

首先，我尝试将按钮放在所有屏幕的中间部分。尝试使用：margin：auto;，并且在这种情况下获得水平对齐，但是verticaly no（按钮保持在顶部od部分）。文本中心，也不解决问题...

我可能会在每个屏幕上使用@media执行此操作，但想知道是否有任何通用解决方案..

TNX， P

Answer 1

试试这个：

<div style="display:table; height:310px; width: 100%;">
  <div style="display:table-cell;vertical-align:middle;">
    <button style="text-align:center;">Text Content</button>
  </div>
</div>

有关详细信息，请查看以下内容：how to center in css

Answer 2

使用下面的css：

.section2 button{
    display:table;
    margin:auto;
}
.section2 button a{
    display:block; 
}

Answer 3

这将解决您的问题

<section class="col-md-12 section2 "> 
  <div class="row">
      <div class="col-xs-10 text-center col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
        <button ><a href=""class="sec2Text ">test</a></button>
      </div> 
    </div>
</section>

将引导按钮放在部分中间

3 个答案: