我无法将<button>放在中间。我尝试了很多方法。已尝试使用padding-left:50%，Transformation。 button应该位于中间孔的下方。
$(document).ready(function() {
var content="";
$("#click").click(function() {
$.getJSON("//quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(key) {
content=key[0].content + "<p>— " + key[0].title + "</p>";
$("#quote-form").html(content);
console.log(content);
});
$("#quote-form").css({"font-family":"lucida console", "font-size": "20px","color":"rgb(255,255,150)"});
});
});.position-message{
margin-left: 25%;
margin-right:25%;
margin-top:10%;
}
div.background{
background-color: rgba(245,245,245,0.1);
border-radius:10%;
padding-bottom: 5%;
}
#button-prop{
/*transformation : translateX(-50%); */
position :absolute;
padding-left : 50%;
/*-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%); */
}
.quote-shape{
border-radius: 10%;
}
#page{
margin-left: 5%;
margin-right: 5%;
margin-top:2%;
margin-bottom:2%;
width: 1200px;
height: 450px;
max-height: 450px;
}
#page-background{
background-image: url(http://www.wallpapers4u.org/wp-content/uploads/grid_background_line_texture_surface_50781_1920x1080.jpg);
}
#share {
height:30px;
width: 80px;
}
.space-from-quote{
padding-top: 2%;
}<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&lang=en" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<Title>Click to get quotes</Title>
</head>
<body id="page-background">
<div class="well background" id="page">
<div class="fixed-width">
<div id="quote" class="position-message">
<span><p id="quote-form"></p></span>
</div>
<!--<div class="row" id="button-shape">
<div id="share" class="col">
<a class="click" href="http://www.facebook.com/dialog/feed?app_id={{fbapp_id}}&link={{link_url}}&message={{share_message|urlencode}}&display=popup&redirect_uri={{link_url}}" target="_blank">
<i class="fa fa-facebook-official"></i> Share
</a>
</div>-->
</div>
</div>
<button type="button" id="click button-prop" class="btn btn-outline-secondary btn-circle" ><i class="fa fa-refresh fa-2x"></i>
</button>
</body>
</html>最佳答案
由于已经使用了Bootstrap框架，请考虑将.text-center实用工具类归因于所讨论的.btn元素的包含元素，例如：
<div class="text-center">
<button type="button" id="click button-prop" class="btn btn-outline-secondary btn-circle">
<i class="fa fa-refresh fa-2x"></i>
</button>
</div>
代码段演示：
$(document).ready(function() {
var content = "";
$("#click").click(function() {
$.getJSON("//quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(key) {
content = key[0].content + "<p>— " + key[0].title + "</p>";
$("#quote-form").html(content);
console.log(content);
});
$("#quote-form").css({
"font-family": "lucida console",
"font-size": "20px",
"color": "rgb(255,255,150)"
});
});
});.position-message {
margin-left: 25%;
margin-right: 25%;
margin-top: 10%;
}
div.background {
background-color: rgba(245, 245, 245, 0.1);
border-radius: 10%;
padding-bottom: 5%;
}
#button-prop {
/*transformation : translateX(-50%); */
position: absolute;
padding-left: 50%;
/*-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%); */
}
.quote-shape {
border-radius: 10%;
}
#page {
margin-left: 5%;
margin-right: 5%;
margin-top: 2%;
margin-bottom: 2%;
width: 1200px;
height: 450px;
max-height: 450px;
}
#page-background {
background-image: url(http://www.wallpapers4u.org/wp-content/uploads/grid_background_line_texture_surface_50781_1920x1080.jpg);
}
#share {
height: 30px;
width: 80px;
}
.space-from-quote {
padding-top: 2%;
}<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&lang=en" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<Title>Click to get quotes</Title>
</head>
<body id="page-background">
<div class="well background" id="page">
<div class="fixed-width">
<div id="quote" class="position-message">
<span><p id="quote-form"></p></span>
</div>
<!--<div class="row" id="button-shape">
<div id="share" class="col">
<a class="click" href="http://www.facebook.com/dialog/feed?app_id={{fbapp_id}}&link={{link_url}}&message={{share_message|urlencode}}&display=popup&redirect_uri={{link_url}}" target="_blank">
<i class="fa fa-facebook-official"></i> Share
</a>
</div>-->
</div>
</div>
<div class="text-center">
<button type="button" id="click button-prop" class="btn btn-outline-secondary btn-circle">
<i class="fa fa-refresh fa-2x"></i>
</button>
</div>
</body>
</html>关于javascript - 如何将元素放置在中间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48241902/