MichielBorkent
December 1, 2016
121 views
4 votes
5 Answers

I’m looking for a more elegant way to align the right icons with the left text vertically, as the negative margin might be a little bit of a hack.

div.main {
  border: 1px solid black;
  padding: 14px;
}

div.icons {
  margin-top: -1.65em;
}

div.icon {
  font-size: 2rem;
  color: blue;
  border: 0.1px solid blue;
  border-radius: 3px;
  margin-left: -1px;
  padding: 3px;
  float: right;
}

<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>


<div class="main">
  <div class="summary">Some text</div>
  <div class="icons pull-right">
    <div class="icon fa fa-line-chart">
    </div>
    <div class="icon fa fa-bar-chart">
    </div>
  </div>
</div>

Answers

- YannChabot
- December 1, 2016 at 3:52 pm
- 0 votes
0
A good way is to set both, the icon and the text, in seperate element and then give them the following css property:
```
.mySelectors{
   display: inline-block;
   vertical-align: middle;
}
```
Login or Signup to reply.

If flexbox is an option, just add display: flex for main and for the icons this for horizontal positioning:

div.icons {
  margin-left:auto;
}

and align-items: center for vertical alignment.

See demo below:

div.main {
  border: 1px solid black;
  padding: 14px;
  display: flex;
  align-items: center;
}

div.icons {
  margin-left:auto;
}

div.icon {
  font-size: 2rem;
  color: blue;
  border: 0.1px solid blue;
  border-radius: 3px;
  margin-left: -1px;
  padding: 3px; 
}

<!DOCTYPE html>
<html>
<head>  
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>  
</head>

<body>
  
  <div class="main">
  <div class="summary">Some text</div>
  <div class="icons pull-right">
    <div class="icon fa fa-line-chart">
    </div>
    <div class="icon fa fa-bar-chart">
    </div>
  </div>
</div>
  
</body>
</html>

You can simply use flexbox for doing this.

Apply display: flex to parent which is div.main in your case
and apply margin-left: auto to child which you want to align right side of window.

Something like below.

div.main {
  border: 1px solid black;
  padding: 14px;
  display: flex;
}

div.icons {
  margin-left: auto;
  /*margin-top: -1.65em;*/
}

div.icon {
  font-size: 2rem;
  color: blue;
  border: 0.1px solid blue;
  border-radius: 3px;
  margin-left: -1px;
  padding: 3px; 
  float: right;
}

<!DOCTYPE html>
<html>
  <head>  
    <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>  
  </head>

  <body>

    <div class="main">
      <div class="summary">Some text</div>
      <div class="icons pull-right">
        <div class="icon fa fa-line-chart">
        </div>
        <div class="icon fa fa-bar-chart">
        </div>
      </div>
    </div>

  </body>
</html>

Hope this will help you in some way (y).

Flex box reference – complete flexbox reference

You can use CSS Flexbox. And use flex’s align properties. Have a look at the snippet below:

div.main {
  border: 1px solid black;
  padding: 14px;
  display: flex;
  align-items: center;
}

div.summary {
  flex: 1;
}

div.icon {
  font-size: 2rem;
  color: blue;
  border: 0.1px solid blue;
  border-radius: 3px;
  margin-left: -1px;
  padding: 3px; 
  float: right;
}

<html>
<head>  
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>  
</head>

<body>
  
  <div class="main">
  <div class="summary">Some text</div>
  <div class="icons">
    <div class="icon fa fa-line-chart">
    </div>
    <div class="icon fa fa-bar-chart">
    </div>
  </div>
</div>
  
</body>
</html>

Hope this helps!

You still can use a custom styles when you need:

using your code:

Using Flexbox

support ie10+

div.main {
  border: 1px solid black;
  padding: 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;

}

div.icon {
  font-size: 2rem;
  color: blue;
  border: 0.1px solid blue;
  border-radius: 3px;
  margin-left: -1px;
  padding: 3px; 
  float: right;
}

<!DOCTYPE html>
<html>
<head>  
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>  
</head>

<body>
  
  <div class="main">
  <div class="summary">Some text</div>
  <div class="icons">
    <div class="icon fa fa-line-chart">
    </div>
    <div class="icon fa fa-bar-chart">
    </div>
  </div>
</div>
  
</body>
</html>

Using Table styles

support ie8+

div.main {
  border: 1px solid black;
  padding: 14px;

  display: table;
  width: 100%;

}

div.summary {
  display: table-cell;
  vertical-align: middle;
}

div.icon {
  font-size: 2rem;
  color: blue;
  border: 0.1px solid blue;
  border-radius: 3px;
  margin-left: -1px;
  padding: 3px;
  float: right;
}

<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>  
<div class="main">
  <div class="summary">Some text</div>
  <div class="icons">
    <div class="icon fa fa-line-chart">
    </div>
    <div class="icon fa fa-bar-chart">
    </div>
  </div>
</div>

have a look at this flexbox guide or this guide on flexbox without flexbox.

Also consider using more explicit class names that are not dependant to tags i.e. have a look at BEM

Please signup or login to give your own answer.

Click here to cancel reply.

Align icons with text without using a negative margin – Twitter bootstrap

Answers

Using Flexbox

Using Table styles