使用CSS和Bootstrap定位按鈕

我試圖將我的「tweet」按鈕放在我的「生成報價」按鈕旁邊，但由於某些原因，css無法正常工作。我嘗試使用top: 50%,margin-top: 50%，將它放置在「引號」div下的另一個div中，使用＃作爲目標，但它仍停留在左上角。可能是什麼原因？使用CSS和Bootstrap定位按鈕

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和Bootstrap定位按鈕

回答

相關問題