2

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>

2
  • @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. Aug 18, 2017 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: jsfiddle.net/036euku1
    – Asons
    Aug 18, 2017 at 17:40

3 Answers 3

2

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>

1
  • 1
    That's what I was looking for. Thanks ! Aug 18, 2017 at 16:55
2

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>

1

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 look this image that I got it a while a go online.

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>

Not the answer you're looking for? Browse other questions tagged or ask your own question.