我试图将“推文”按钮放在“生成引用”按钮旁边，但由于某种原因，CSS 不起作用。我尝试使用 top: 50%、margin-top: 50%，将其放置在“quote”div 下的另一个 div 中，用 # 定位它，但它仍然保留在左上角。可能是什么原因？
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%;
}
最佳答案
您可以将所有这些文本/按钮内容放在绝对定位的单个元素中，然后相对于彼此相对定位该元素的内容，而不是绝对定位每个单独的元素。这将使事情变得容易得多。
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>关于css - 使用 CSS 和 Bootstrap 定位按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42491192/