如何将元素放在中间位置

时间：2018-01-13 16:33:40

标签： javascript jquery html css

我无法将<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&amp;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>

4 个答案:

答案 0 :(得分：1)

#button-prop{
    width: 200px;
    position: absolute;
    left: 50%;
    margin-left: -100px;
}

这应该把你的按钮放在中间

答案 1 :(得分：1)

由于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&amp;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>

答案 2 :(得分：0)

试试这段代码。由于您想将刷新按钮带到页面中心。

$(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%;
}

.wrapper {
  text-align: center;
}

#button-prop {
  position: absolute;
  top: 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&amp;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 class="wrapper">
        <button type="button" id="click button-prop" class="btn btn-outline-secondary btn-circle"><i class="fa fa-refresh fa-2x"></i>
</button>

      </div>

    </div>
  </div>

</body>

</html>

答案 3 :(得分：0)

只需将按钮放在div中并放置style =＆＃34; text-align：center; 你的HTML代码将是：

<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&amp;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 style="text-align: center;">
       <button type="button" id="click button-prop" class="btn btn-outline-secondary btn-circle" ><i class="fa fa-refresh fa-2x" style =""></i>

</button>
</div>

</body>

</html>
相关问题
最新问题