CODEWITHSUNDEEP
htmlcss
Ted
Ted

Reputation: 85

Text-centering with larger numbers?

In a picture the problem is:

https://i.sstatic.net/ryV96.png

In details: I'm trying to keep the "voteTotal" centered as it increases to larger (say two or three digits) numbers. I've fiddled with various "text-align" and css properties (as well as div-wrappers) but I can't figure out why larger numbers are not centered properly. Any thoughts?

HTML:

<span>
  <button class="glyphicon glyphicon-menu-up voteButton upvoted"></button>
  <h4 class="voteTotal">10</h4>
  <button class="glyphicon glyphicon-menu-down voteButton"></button>
</span>

CSS:

.voteButton {
  margin: 0 auto;
  padding: 0;
  font-size: 1.5em;
}

.voteTotal {
  display: block;
  margin: -.5em auto 0 auto;
  padding: 0;
  width: 50%;
  text-align: center;
}

Upvotes: 0

Views: 123

Answers (2)

isherwood
isherwood

Reputation: 61114

It's not valid to put block elements inside inline elements (spans). This is mostly a matter of center alignment and giving the H4 enough space:

div {
  display: inline-block;
  text-align: center;
  background: pink;
  padding: 10px;
  min-width: 20px;
}
.voteButton {
  margin: 0 auto;
  padding: 0;
  font-size: 1.5em;
}
.voteTotal {
  display: block;
  margin: 0 auto;
}
<div>
  <button class="glyphicon glyphicon-menu-up voteButton upvoted">></button>
  <h4 class="voteTotal">3</h4>

  <button class="glyphicon glyphicon-menu-down voteButton">
    <</button>
</div>
<div>
  <button class="glyphicon glyphicon-menu-up voteButton upvoted">></button>
  <h4 class="voteTotal">10</h4>

  <button class="glyphicon glyphicon-menu-down voteButton">
    <</button>
</div>

Upvotes: 1

user3845133
user3845133

Reputation:

Try to add text-align:center to the parent span class.

p.s. I suggest you to remove that width 50% from the voteTotal and change it to something else. If you need further help, please provide a demo link.

Upvotes: 1

Related Questions