How to horizontally center the elements inside "scoreBox"?

Question

How to horizontally center the elements inside "scoreBox" ?

They are currently just 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>

@axlj I already saw that. I also think this has most likely already been answered before, but I can't seem to find a way to do such a simple thing... I need the 3 elements to stay close together and be centered. — TheProgrammer, Aug 18 '17 at 16:53
The 6th answer has the Flexbox version, `justfy-content: center` ...and by simply remove `display: flex` from your posted code will do the trick: https://jsfiddle.net/036euku1/ — Asons, Aug 18 '17 at 17:40

score 2 · Accepted Answer · answered Aug 18 '17 at 16:54

Add justify-content: center to your 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>

That's what I was looking for. Thanks ! – TheProgrammer Aug 18 '17 at 16:55 — TheProgrammer, Aug 18 '17 at 16:55

score 2 · Answer 2 · answered Aug 18 '17 at 16:54

make HP width: 100% or margin: 0 auto this happens because you cant center align whole div, so if you want width 100% you need do some margin magic.

edit: justify-content makes sense too

.voteButtons {
  display: inline-block;
  text-align: center;
}

.HP {
  display: inline-block;
  text-align: center;
  width: auto !important;
  margin: 0 auto;
}

.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>

score 1 · Answer 3 · answered Aug 18 '17 at 17:15

As you can see from my code below , I just add justify-content and make it center. It defines the alignment along the main axis. It will help you distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.

It also exerts some control over the alignment of items when they overflow the line.

To easily understand the different way on how to use justify-content .

Hope this will answer your question.

.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>

How to horizontally center the elements inside "scoreBox"?

3 Answers3