我如何将文本保持对齐时，我该如何中心引用content ID

Question

我有一个随机报价gen页面，显示randome引号。因此，我想将文本保持对齐的同时，我想将其引用为中心。还有报价标题div ...这是我的HTML代码：预先感谢Codepen项目https://codepen.io/zentech/pen/zyyggq?editors=0010

$(document).ready(function() {  
  /*getting random quote on button click*/
  $('#getMessage').on("click", function() {
    $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=&"+new Date().getTime(), function(json) {      
      console.log(json[0].content)
      console.log(json[0].title)
      // var quoteArr = json.contents.quotes[0])
      $("#quote-content").html(json[0].content);
    $("#quote-author").html("--"+json[0].title);
});    
  });  
});
      
   
  

body {
  background-color: #334551;
}
.container {
  padding-top: 50px;
}
.header_text {
    font-family: 'Allura';font-size: 50px;
    color: green;
}
.sub_text {
   font-family: 'Allura';font-size: 30px;
}
#getMessage {
   font-size: 18px;
}
.image {
  width: 160px;
  height: 180px;
  border-radius: 300px;
  border-color: green;
  border-width: 5px;
  border-style: solid;
  
}
.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.text {
  color: white;
  font-family: 'Verdana';
  font-size: 18px;
}

<link href='https://fonts.googleapis.com/css?family=Allura' rel='stylesheet'>
<div class="container">  
    <h1 class="col-lg-12 header_text text-primary text-center">Welcome to Daily Quotes!</h1>
    <div class="row col-lg-12 text-centered">
  <img class="image center" src="http://pctechtips.org/quotes/aristoteles.jpg">
  </div> 
  <div class="row">
    <p class="col-md-12 sub_text text-center text-primary">Press the button for a famous quote!...</p>
  </div>
    <div class="col-md-3 center">      
      <button id="getMessage" class="btn btn-primary">Get quote!</button>
  </div> 
  <br> 
  <div id="quote-content" class="row col-lg-12 text center"></div> 
    
  <div id="quote-author" class="row col-lg-12 text center"></div> 
  
</div>

Answer 1

html

<div class="col-md-6 offset-md-3">
  <div id="quote-content" class="row col-lg-12 text center"></div> 
  <div id="quote-author" class="row col-lg-12 text center"></div> 
</div>

通过包装Bootstrap col包装并将其移动以偏移

将其置于中心

希望这会有所帮助...