Question

我正试图让我的两个按钮居中，就像我用h2做的那样，但失败了。

代码：

HTML：

string 'SELECT 2,2015-01-12,2015-01-18 FROM staff  where id = :id' (length=57)

string 'SELECT 49,2015-12-07,2015-12-13 FROM staff  where id = :id' (length=58)

string 'SELECT 26,2015-06-29,2015-07-05 FROM staff  where id = :id' (length=58)

string 'SELECT 11,2015-03-16,2015-03-22 FROM staff  where id = :id' (length=58)

string 'SELECT 11,2015-03-16,2015-03-22 FROM staff  where id = :id' (length=58)

string 'SELECT 51,2015-12-21,2015-12-27 FROM staff  where id = :id' (length=58)

string 'SELECT 39,2015-09-28,2015-10-04 FROM staff  where id = :id' (length=58)

string 'SELECT 9,2015-03-02,2015-03-08 FROM staff  where id = :id' (length=57)

string 'SELECT 2,2015-01-12,2015-01-18 FROM staff  where id = :id' (length=57)

string 'SELECT 25,2015-06-22,2015-06-28 FROM staff  where id = :id' (length=58)

string 'SELECT 24,2015-06-15,2015-06-21 FROM staff  where id = :id' (length=58)

string 'SELECT 7,2015-02-16,2015-02-22 FROM staff  where id = :id' (length=57)

string 'SELECT 18,2015-05-04,2015-05-10 FROM staff  where id = :id' (length=58)

string 'SELECT 27,2015-07-06,2015-07-12 FROM staff  where id = :id' (length=58)

的CSS：

<div class="container theme-showcase" role="main">
        <div id="innermain" class="col-xs-12">
          <div><h2>Please choose one button</h2></div>
            <div id="row" class="col-xs-12">
              <div id="kiosk_btn" class="btn btn-default col-xs-3" onclick="">Button 1</div>
              <div id="kiosk_btn" class="btn btn-default col-xs-3" onclick="">Button 2</div>
              </div>
            </div>
        </div>

JSFIDDLE

Answer 1

检查更新后的fiddle。

使用col-xs-3添加两个空 div。一个在上面两个按钮，一个在下面填充col-xs-12的宽度。

小提琴使用class来设置按钮CSS属性而不是id

旁注：确保仅使用一个ID 作为按钮或其他元素。

Answer 2

您的代码包含多个错误：

错误的div嵌套
不要在同一元素上使用（bootstraps）row和col *
row是bootstrap中的一个类，而不是id
仅使用ID（#kiosk_btn）一次或使其成为一个类

抛开这个，这将得到你想要的结果：

#kiosk_btn{font-size: 3vh; background-color: #141E26; border:none; box-shadow: 5px 5px 5px black; margin: 2vh; padding-top:2vh; color:white;}
#kiosk_btn:active{outline: none; text-decoration: none;}
#kiosk_btn:focus{outline: none; text-decoration: none; }
#kiosk_btn:hover{text-decoration: none; background-color: #213140;}
.col-xs-12 {text-align: center;}


<div class="container theme-showcase" role="main">
<div id="innermain" class="col-xs-12">
  <div><h2>Please choose one button</h2></div>
    <div id="row" class="col-xs-12">
      <div id="kiosk_btn" class="btn btn-default" onclick="">Button 1</div>
      <div id="kiosk_btn" class="btn btn-default" onclick="">Button 2</div>
      </div>
    </div>
</div>

Answer 3

要实现这一目标，您可以查看CSS属性transform。这将2D或3D转换应用于元素。这允许您旋转，缩放，移动，倾斜等元素。

在您的情况下，您将使用transform: translate(X, Y)，其中X和Y应替换为％值，像素或em值

我已经编辑了你的小提琴，以便大家了解如何做到这一点：fiddle

基本上你要做的是在你的按钮周围添加一个类，在这种情况下.buttons

按钮类：

.buttons {
   -webkit-transform: translate(20%, 50%);
   -moz-transform:translate(20%, 50%);
   transform:translate(20%, 50%);
}

已编辑的HTML：

<div class="container theme-showcase" role="main">
  <div id="innermain" class="col-xs-12">
    <div><h2>Please choose one button</h2></div>
      <div id="row" class="col-xs-12 buttons">
        <div id="kiosk_btn" class="btn btn-default col-xs-3" onclick="">Button 1</div>
        <div id="kiosk_btn" class="btn btn-default col-xs-3" onclick="">Button 2</div>
      </div>
    </div>
</div>

Answer 4

使用bootstrap内置类text-center进行标题的中心对齐，并使用按钮尝试使用grid offset concept引导程序。查看fiddle以供参考。

Answer 5

尝试在表单上使用form-inline和text-center类。它有点像hacky，但只要屏幕是768px及以上就可以正常工作，否则它会在需要时降级。查看工作小提琴here

水平居中引导按钮

5 个答案: