水平居中自舉按鈕

我想讓我的兩個按鈕居中，就像我用h2做的那樣，但失敗了。水平居中自舉按鈕

代碼：

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"> 
       <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>

CSS：

#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;} 
    h2{text-align: center;}

JSFIDDLE

來源

2015-10-13 Coolguy

替換css #kiosk_btn { background-color：＃141e26; border：medium none; box-shadow：5px 5px 5px black; 顏色：白色; float：none; font-size：3vh; margin：2vh; padding-top：2vh; } .............. 和使用類通過給家長文字居中對齊修改HTML代碼...............

Button 1

Button 2

–

檢查更新fiddle 。

加兩個空 div與col-xs-3。一個在上面的兩個按鈕，下面一個填充col-xs-12的寬度。

小提琴使用class設置按鈕CSS屬性，而不是id

側面說明：確保只使用一個ID爲按鈕或其他元素。

來源

2015-10-13 08:45:55

我的按鈕ID是kiosk_btn。這是對的嗎？ – Coolguy

'id'對於不同的元素應該是不同的。對於CSS使用類屬性...檢查更新的小提琴..其中我已經刪除了'id'並使用class代替... –

代碼中包含多張錯誤：

錯DIV嵌套
不使用（引導程序）ROW和COL *相同的元素
行的是引導一個類，而不是一個id
使用IDS（#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>

來源

2015-10-13 08:49:05 Sebastian

我看到你已經取出了我的kiosk_btn的col-xs-3。但是，如何指定我的按鈕的寬度？ – Coolguy

添加寬度：150px; （例如）到你的#kios_btn id在css中。但從長遠來看，這應該是一個類，因爲你使用它兩次。 – Sebastian

要達到此目的，您可以查看CSS屬性transform。將2D或3D變換應用於元素。這使您可以旋轉，縮放，移動，傾斜等元素。

你的情況，你可以使用transform: translate(X, Y)其中X和Y應要麼％的值，像素被替換或em值

我已經編輯你的小提琴匹配給你怎樣做才能實現總體思路這樣的：fiddle

基本上是你做的是你添加一個類你的div周圍的按鈕，在這種情況下.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>

來源

2015-10-13 08:52:21 Simplicity

使用內置自舉類text-center爲標題的中心對齊以及按鈕嘗試使用引導的grid offset concept。查看fiddle供您參考。

來源

2015-10-13 09:26:30

嘗試在表單上使用form-inline和text-center類。這是一種黑客行爲，但只要屏幕高於768像素就能完美運行，否則會在需要時降級。看到一個工作小提琴here

來源

2015-10-13 14:43:07 Wargog

水平居中自舉按鈕

回答

相關問題