Search code examples
htmlcsscenterinline

HTML, CSS: Append inline-element to the right of a centered inline-element

(The title might sound stupid but I don't know how to put it more sophisticated.)

As you can see in the follwing screenshots, I have 3 stacked divs.

enter image description here

<div class="col-xs-3">
  <div class="center-horizontal-inline">
    <a class="upvote" href="#" data-id="iZheLNnewWtMhPTQd">
  </div>
<div class="score">
  115
  <span class="badge score-diff vertical-align"> +5 </span>
</div>
<div class="center-horizontal-inline">
</div>

The one in the middle contains the number (115). The other two the vote-arrows. For the one containing the number, I want to add a "badge" (in bootstrap context) right next to the number, let's say to the right. You can see my attempt shining through the colored overlay.

The goal is to leave the number centered respectively to the arrow-icons, while placing the badge with an offset (or "right next to") respectively to the number.

My attempt was to set a float: right; for the badge, but as you can see, the number has an offset now. When I try position: absolute; on the badge, there is no offset (as wanted), but I can't get the badge right next to the number, I can only attach it to the right border because I don't have the number as positioning-reference anymore.

Hope my explanation was clear enough. I also didn't know how to search for that problem...

EDIT 1:

As I want it to look like (positioning-wise):

ui-ideal

Solution

  • Here we go, using relative and absolute positions together:

    DEMO: http://jsfiddle.net/1qbo7uwn/

    HTML

    <div class="score">
    <span class="score-wrap">
        <span class="score-main">123</span>
        <span class="score-diff">8</span>
    </span>
</div>

    CSS

    .score {
    width: 80px;
    border: 2px solid blue;
    padding: 10px 0;
    text-align: center;
}

.score-wrap {
    display: inline-block;
    position: relative;
}

.score-main {
    border: 2px solid green;
}

.score-diff {
    position: absolute;
    border: 2px solid red;
    left: 100%;
    top: -2px;
}

    Added some span tags in the HTML.

    EDIT: vertical align of everything, by setting line height.

    http://jsfiddle.net/1qbo7uwn/1/