0
ランダムな見積もりページには、ランダムな見積もりが表示されます。だから引用コンテントのdiv私はそれを左揃えにしてテキストを中央に揃えたい。そしてまた...ここに私のhtmlコードがquote-タイトルのdivです：事前 codepenプロジェクトに感謝 https://codepen.io/zentech/pen/ZyyGgq?editors=0010 テキストを左揃えにしている間に見積もりコンテンツIDを中央に揃える方法
$(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>
'私は左揃えにしてテキストを中央に配置したいですね。まあ、それはちょっと暴言です。 –
希望の結果を視覚的に表現できますか？ – mjw