CSSとブートストラップを使用したボタンの配置

"tweet"ボタンを "generate quotes"ボタンの隣に配置しようとしていますが、何らかの理由でCSSが機能しません。私はtop: 50%、margin-top: 50%を使って試してみましたが、別のdivに "quotote" divの下に置いて＃でターゲティングしましたが、それでもまだ左上隅にあります。理由は何でしょうか？CSSとブートストラップを使用したボタンの配置

https://codepen.io/s4ek1389/pen/zZGNWw?editors=1100

HTML

<head> 
    <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet"> 
</head> 

<div class="main"> 
    <div id="quote"> 
    <h1>There is nothing either good or bad, but thinking makes it so.</h1> 
    <h4>William Shakespeare</h4> 
    </div> 

    <div class="containter"> 
<div class="row"> 
    <button type="button", class="btn btn-primary", id="gen"> Generate Quote! 
    </button> 

    <a href="https://twitter.com/share" class="twitter-share-button" data-size="large" data-show-count="false" id="tw">Tweet</a> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 
    </div> 
    </div> 
</div>

CSS

.main { 
    background-image:url("http://wallpapercave.com/wp/mVcZwOP.jpg"); 
background-size:cover; 
min-height: 640px; 
margin: 0 auto; 
position:relative; 
width:100%; 
max-width:1680px; 

} 

#quote { 
text-align:center; 
width:70%; 

} 
h1 { 

    position: absolute; 
    top: 30%; 
    font-size:5vw; 
    background-color:rgba(173, 29, 125, 0.5); 
    color:white; 
    font-family: "Comfortaa", cursive; 
    text-align:center; 
    display:block; 
} 

h4 { 
    top:60%; 
    font-size:3vw; 
    background-color:rgba(173, 29, 125, 0.5); 
    color:white; 
    font-family: "Comfortaa", cursive; 
    position:absolute; 

    display:inline-block; 

} 

#gen { 
    top:80%; 
    position: absolute; 
    left:42%; 
    display:inline; 
} 

#tw { 
top:50%; 
position:absolute; 
margin-top:50%; 

}

出典

2017-02-27 Igor Schekotihin

代わりに絶対的に個々の要素を配置する、あなたは絶対にあなたの単一の要素で、このテキスト/ボタン内容のすべてを置くことができますその要素の内容を相対的に相対的に配置します。物事をもっと楽にするでしょう。

あなたのTwitterボタンの主な問題は、あなたのHTMLに入れたコードは、ちょうどtwitterボタンのiframeに置き換えられたプレースホルダにすぎないということです。間違った要素をスタイリングしています。 #twをスタイルしたくない場合は、#twitter-widget-0というスタイルを使用します。これは、Twitterボタンが作成するレンダリングされたiframeのIDです。しかし、上記のような要素にそのコードを記述すると、そのボタンをスタイルする必要はありません。

.main { 
 
    background-image: url("http://wallpapercave.com/wp/mVcZwOP.jpg"); 
 
    background-size: cover; 
 
    min-height: 640px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    width: 100%; 
 
    max-width: 1680px; 
 
} 
 

 
#quote { 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 30%; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
h1 { 
 
    font-size: 5vw; 
 
    background-color: rgba(173, 29, 125, 0.5); 
 
    color: white; 
 
    font-family: "Comfortaa", cursive; 
 
} 
 

 
h4 { 
 
    font-size: 3vw; 
 
    background-color: rgba(173, 29, 125, 0.5); 
 
    color: white; 
 
    font-family: "Comfortaa", cursive; 
 
    display: inline-block; 
 
} 
 

 
#gen { 
 
    margin-right: 1em; 
 
} 
 

 
.buttons { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<head> 
 
    <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet"> 
 
</head> 
 

 
<div class="main"> 
 
    <div id="quote"> 
 
    <h1>There is nothing either good or bad, but thinking makes it so.</h1> 
 
    <h4>William Shakespeare</h4> 
 
    <div class="buttons"> 
 
     <button type="button" class="btn btn-primary" id="gen"> Generate Quote!</button> 
 
     <a href="https://twitter.com/share" class="twitter-share-button" data-size="large" data-show-count="false" id="tw">Tweet</a> 
 
     <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-02-27 16:57:20

どうもありがとうございました。すべてが今働きます。私も＃twitter-widget-0を使ってみましたが、ボタンを配置することもできました。しかし、私はあなたがこのIDの名前を発見した場所を理解していません。 –

@IgorSchekotihin np。 IDを見つけるには、開発ツールを使用し、作成後に要素を調べます。 –

CSSとブートストラップを使用したボタンの配置

答えて

関連する問題