CODEWITHSUNDEEP
htmlcssflexboxvertical-alignment
Michiel Borkent
Michiel Borkent

Reputation: 34840

Align icons with text without using a negative margin

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>

Upvotes: 3

Views: 870

Answers (5)

chitzui
chitzui

Reputation: 4098

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

Upvotes: 1

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

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!

Upvotes: 2

pradeep1991singh
pradeep1991singh

Reputation: 8375

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

Upvotes: 0

kukkuz
kukkuz

Reputation: 42352

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>

Upvotes: 1

Yann Chabot
Yann Chabot

Reputation: 4869

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;
}

Upvotes: 1

Related Questions