水平居中對齊一個引導按鈕和伴隨文本

我想水平居中對齊一個引導按鈕和伴隨文本。但我沒有得到預期的產出。有人能告訴我爲什麼它不集中？水平居中對齊一個引導按鈕和伴隨文本

<div class="col-md-12 well"> 
    <div class="col-md-6"> 
     <h2 class="btn btn-warning btn-lg btn-block">Sign in via google</h2> 
    </div> 
    <div class="col-md-6 text-center"> 
     <span><em> Already have an account? Login</em></span> 
    </div> 
</div>

我創建了一個Plunker demo。在較小的屏幕上，它按預期工作。但是在更大的屏幕中，它沒有正確對齊。跨度標籤之外

來源

2016-01-18 Abhilash

經過一番擺弄周圍，我發現一個solution..Its不是引導解決方案。但它只有css的幾行。如果有人在這裏找到靴子方式，我會改變接受的答案。謝謝。

<div class="row well row-centered"> 
     <div class="col-md-6 col-centered"> 
     <h2 class="btn btn-warning btn-lg center-block">Sign in via google</h2> 
     </div> 
     <div class="col-md-6 text-center col-centered" > 
     <span><em> Already have an account?Login 
     </div> 
     </div>

這裏是自定義CSS

/* centered columns styles */ 
    .row-centered { 
    text-align:center; 
    } 
    .col-centered { 
    display:inline-block; 
    float:none; 
    /* reset the text-align */ 
    text-align:left; 
    /* inline-block space fix */ 
    margin-right:-4px; 
    }

來源

2016-01-18 13:17:59 Abhilash

div的使用

<div style="text-align:center;" ><span class="text-center"><em> Already have an account? Login</em></span> 
     </div>

來源

2016-01-18 12:37:32

使用col-md-offset-3與col-md-6一起中心對齊內容：

<div class="col-md-offset-3 col-md-6"> 
    ... 
</div>

更進一步，設置text-center類在外面的div而不是span標記：

<div class="col-md-offset-3 col-md-6 text-center"> 
    <em> Already have an account? Login</em> 
</div>

查看小提琴here。

來源

2016-01-18 12:42:13 KrisD

是添加 '文本中心' 外面正在居中的文本。但是它已經滑向了面板的頂端。如何將文本和按鈕保持在面板中心正確對齊？此外，我不想使用col-md-offset，因爲我想在大屏幕面板中的按鈕和文本在同一行中。 – Abhilash

試試這個代碼...

<body> 
    <div class="row"> 
    <div class="col-md-6 col-md-push-3"> 
     <h2 class="btn btn-warning btn-lg btn-block">Sign in via google</h2> 
    </div> 
    <div class="col-md-6 col-md-offset-3"> 
     <span><em> Already have an account? Login</em></span> 
    </div> 
    </div> 
</body>

Plunker Link

來源

2016-01-18 13:04:23 Nofi

它將文本推到底部..我正在尋找水平對齊，因爲您可以看到我的plunker – Abhilash

試試這個：

.flex-centered { 
 
    display: flex; 
 
    justify-content: center; 
 
    margin-top: 31px; 
 
    height: 46px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="col-md-12 well"> 
 
    <div class="col-md-6 text-center"> 
 
    <h2 class="btn btn-warning btn-lg btn-block">Sign in via google</h2> 
 
    </div> 
 
    <div class="col-md-6"> 
 
    <div class="flex-centered"> 
 
     <em> Already have an account? Login</em> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-01-18 14:05:46

水平居中對齊一個引導按鈕和伴隨文本

回答

相關問題