如何在div的底部和中心放置一個按鈕？

Question

我有一個真正的問題，試圖在一個div的底部和中心放置一個按鈕。我最終終於把它看成全屏模式，但我知道這種方法是完全錯誤的。

我能夠按照我想要的方式對齊文本，但按鈕與位置和翻譯不一樣。我嘗試使用bootstraps列，但沒有奏效。我不確定我完全理解相對於其父元素或位置的東西。此外，我試過

vertical-align:bottom 
vertical-align:baseline 

這些都沒有工作。

什麼是用於定位一個div的按鈕或底部的任何元素和中心

.navbar-brand { 
 
    font-family: 'Great Vibes', cursive; 
 
    font-size: 30px; 
 
    margin: 5px 0px 5px 1px; 
 
} 
 

 
.navbar-brand { 
 
    color: #F05F40 !important; 
 
} 
 

 
.jumbotron { 
 
    background: url('http://i65.tinypic.com/1213l9y.jpg') no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    margin-left: -15px; 
 
} 
 

 
.jumbotron h1 { 
 
    font-family: 'Great Vibes', cursive; 
 
    font-size: 75px; 
 
    color: white; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
.jumbotron h4 { 
 
    font-family: 'Great Vibes', sans-serif; 
 
    font-size: 25px; 
 
    color: white; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
.btn-primary { 
 
    color: white; 
 
    background-color: #F05F40; 
 
    border-color: #F05F40; 
 
    -webkit-transition: all 0.35s; 
 
    -moz-transition: all 0.35s; 
 
    transition: all 0.35s; 
 
    margin-top: 25%; 
 
} 
 

 
.btn-primary:hover, 
 
.btn-primary:focus, 
 
.btn-primary.focus, 
 
.btn-primary:active, 
 
.btn-primary.active, 
 
.open>.dropdown-toggle.btn-primary { 
 
    color: white; 
 
    background-color: #ee4b28; 
 
    border-color: #ed431f; 
 
} 
 

 
.btn-primary:active, 
 
.btn-primary.active, 
 
.open>.dropdown-toggle.btn-primary { 
 
    background-image: none; 
 
} 
 

 
.btn-primary.disabled, 
 
.btn-primary[disabled], 
 
fieldset[disabled] .btn-primary, 
 
.btn-primary.disabled:hover, 
 
.btn-primary[disabled]:hover, 
 
fieldset[disabled] .btn-primary:hover, 
 
.btn-primary.disabled:focus, 
 
.btn-primary[disabled]:focus, 
 
fieldset[disabled] .btn-primary:focus, 
 
.btn-primary.disabled.focus, 
 
.btn-primary[disabled].focus, 
 
fieldset[disabled] .btn-primary.focus, 
 
.btn-primary.disabled:active, 
 
.btn-primary[disabled]:active, 
 
fieldset[disabled] .btn-primary:active, 
 
.btn-primary.disabled.active, 
 
.btn-primary[disabled].active, 
 
fieldset[disabled] .btn-primary.active { 
 
    background-color: #F05F40; 
 
    border-color: #F05F40; 
 
} 
 

 
.btn-primary .badge { 
 
    color: #F05F40; 
 
    background-color: white; 
 
} 
 

 
.btn { 
 
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; 
 
    border: none; 
 
    border-radius: 300px; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
} 
 

 
.btn-xl { 
 
    padding: 15px 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner"> 
 
    <div class="navbar-header"> 
 
    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    <a href="#" class="navbar-brand">The Authentic Gentleman</a> 
 
    </div> 
 
    <nav class="pull-right collapse navbar-collapse bs-navbar-collapse" role="navigation"> 
 
    <ul class="nav navbar-nav"> 
 
     <li> 
 
     <a href="#">Home</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Blog</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Advice</a> 
 
     </li> 
 
     <li class="#"> 
 
     <a href="#">About</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
    </div> 
 
</header> 
 

 
<div class="container-fluid"> 
 
    <div class="jumbotron"> 
 
    <h1 class="text-center">The Authetnic Gentelman</h1> 
 
    <h4 class="text-center">Refine your life</h4> 
 
    <div class="text-center"> 
 
     <a href="#about" class="btn btn-primary btn-xl">Find Out More</a> 
 

 
    </div> 
 
    </div> 
 
</div>

Answer 1

可以使用position: absolute;設置。 updated codepen

<div class="text-center btnDiv"> 
    <a href="#about" class="btn btn-primary btn-xl">Find Out More</a> 
</div> 


.jumbotron { 
    position: relative; 
} 
.btnDiv { 
    width: 100%; 
    left: 0px; 
    bottom: 10px; 
    position: absolute; 
} 

Answer 2

這將幫助你的最佳實踐。

CSS：

#parent{ 
 
\t  height: 200px; 
 
\t  width: 100%; 
 
\t  position: relative; 
 
\t  border: 1px solid blue; 
 

 
} 
 
#parent #child{ 
 
     width:100%; 
 
     margin: auto; 
 
     text-align: center; 
 
     bottom: 0px; 
 
     position: absolute; 
 
} 

<div id="parent"> 
 
    <div id="child"> 
 
     <button>click here</button> 
 
    </div> 
 
</div>

Answer 3

所以添加position:relative;於母公司的股利和下面的CSS添加到按鈕：

position: absolute; 
bottom: 0; 

CSS：

#parent{ 
    position:relative; 
} 
#button{ 
    position:absolute; 
    bottom:0; 
} 

Answer 4

盪滌你的代碼一點點 - 你不t需要給每個元素class="text-center"。將text-align: center;放在父div中，以便子元素也可以獲得該屬性。

https://codepen.io/julysfx/pen/vZqXgj

Answer 5

你也可以試試這個。

.parent{ 
 
    text-align:center; 
 
} 
 

 
.button{ 
 
    position:fixed; 
 
    bottom:0; 
 
}

<div class='parent'> 
 
    <button class='button'>Save</button> 
 
</div>

Answer 6

你並不需要與位置的代碼複雜：絕對的;

你可以簡單地使用display：table;

守則提到波紋管......

<div class="parent"> 
    <div class="buttonWrap"> 
     <button>button</button> 
    </div> 
</div> 


.parent { 
    height: 200px; 
    width: 300px; 
    padding-bottom: 10px; 
    background: #444; 
    display: table; 
} 

.buttonWrap { 
    display: table-cell; 
    vertical-align: bottom; 
} 

button { 
    margin: 0 auto; 
    display: block; 
}