Twitter Bootstrap Question posted in

Number with icon from right middle – Twitter bootstrap

I have a number and I want to put a star icon next to it, but in the middle.

The font-size of the number can be changed, but the star should stay in the middle.

For examples:

enter image description here

This is my css:

.my-container {
    display: inline-block;
}

.my-text {
    font-family: "Courier-new";
    font-size:20px
}

.my-icon {
    vertical-align: middle;
    font-size: 10px;
}

.my-container {
  display: inline-block;
}

.my-text {
  font-family: "Courier-new";
  font-size: 20px
}

.my-icon {
  vertical-align: middle;
  font-size: 10px;
}
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<div class="my-container">
  <span class="my-text">5</span>
  <span class='icon icon-star my-icon'></span>
</div>

This is my jsfiddle: http://jsfiddle.net/k48ttuLn/

Tags:

3

Answers


  1. 0 
    .my-text {
    font-family: "Courier-new";
    font-size:20px
    vertical-align: middle;
}
    Login or Signup to reply.
  2. 0

    I have used a combination of line-height and vertical-align: middle to achieve this:

    * {
  line-height: 1;
}

.my-container {
  display: inline-block;
  vertical-align: middle;
}

.my-text {
  font-family: "Courier-new";
  font-size: 20px;
  vertical-align: middle;
}

.my-icon {
  vertical-align: middle;
  font-size: 10px;
  line-height: 0.2;
}

.big-font .my-text {
  font-size: 2.5em;
}
    <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<div class="my-container">
  <span class="my-text">5</span>
  <span class='icon icon-star my-icon'></span>
</div>
<div></div>
<div class="my-container big-font">
  <span class="my-text">15</span>
  <span class='icon icon-star my-icon'></span>
</div>

    Preview

    preview

    Fiddle: http://jsfiddle.net/hn6ekzo5/

    Login or Signup to reply.
  3. 0

    I would use flexbox for this. It will vertically center the content no matter the size.

    .my-container {
  display: flex;
  align-items: center;
}

.my-text {
  font-family: "Courier-new";
  font-size: 20px
}

.my-icon {
  vertical-align: middle;
  font-size: 10px;
}

    <div class="my-container">
  <span class="my-text">5</span>
  <span class='icon icon-star my-icon'></span>
</div>

    See A guide to flexbox for more examples and tutorials

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search