html - How to horizontally center the elements inside "scoreBox"? -
this question has answer here:
- how horizontally center <div> using css? 18 answers
how horizontally center elements inside "scorebox" ?
they left aligned.
.votebuttons { display: inline-block; text-align: center; } .hp { display: inline-block; text-align: center; width: auto !important; margin-left: 5px !important; } .scorebox { display: flex; margin-top: 10px; padding-top: 10px; text-align: center; width: auto !important; }
<div class="scorebox"> <span class="votebuttons"><img class="upvotebutton" id="voteup" src="..."><img class="downvotebutton" id="votedown" src="..."></span> <div class="hp"> <%= post.upvotes - post.downvotes%> score </div> </div>
add justify-content: center
scorebox
- see demo below:
.votebuttons { display: inline-block; text-align: center; } .hp { display: inline-block; text-align: center; width: auto !important; margin-left: 5px !important; } .scorebox { display: flex; margin-top: 10px; padding-top: 10px; text-align: center; width: auto !important; justify-content: center; }
<div class="scorebox"> <span class="votebuttons"><img class="upvotebutton" id="voteup" src="..."><img class="downvotebutton" id="votedown" src="..."></span> <div class="hp"> <%= post.upvotes - post.downvotes%> score </div> </div>
Comments
Post a Comment