divの下部と中央にボタンを配置する方法は？

Question

divの下部と中央にボタンを配置しようとすると、本当に問題が発生します。私は最終的にフルスクリーンモードで見えるようになったが、方法論が全く間違っていることは分かっている。

私は望むとおりにテキストを整列させることができましたが、ボタンは位置と同じように動作せず、翻訳もできませんでした。私はブートストラップ列を使ってみましたが、うまくいかなかったのです。私は、親要素や位置に関する相対的な位置付けのことを完全に理解しているかどうかはわかりません。加えて、私は試しました

vertical-align:bottom 
vertical-align:baseline 

どちらも動作しませんでした。

これがお手伝いします

.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

のdivの最良の下部にあるボタンまたは任意の要素を位置決めするための練習とセンターとは何ですか。

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

だから、親のdivにposition:relative;を追加し、ボタンに次のCSSを追加します。

position: absolute; 
bottom: 0; 

CSS：

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

Answer 4

はあなたのコードを少しクリーンアップ - あなたは「ドンすべての要素にclass="text-center"を与える必要があります。親のdivにtext-align: center;を入れてください。そのため、子要素もその属性を取得します。

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; 
}