How to vertical align 2 elements in this scenario?

Question

I have 2 elements, a title and an icon contained in a card.

Title is center aligned horizontally and icon is right aligned horizontally.

But now I want to vertically align both items in the middle.

<div class='card center-align'>
  <span class='card-title'>Title</span>
  <i class='material-icons right'>delete</i>
</div>

.card {
  width: 500px;
  height: 100px;
  vertical-align: middle;
}

Demo here: https://jsfiddle.net/mn3Ldyc7/4/

Been pulling my hair out trying out different methods, but still can't get it perfectly aligned. Any help greatly appreciated!!

Answer 1

Give display: table-cell; to .card class.

 .card { width: 500px; height: 100px; vertical-align: middle; display: table-cell; } .card .card-title { line-height: 30px; } i.right { line-height: 30px; } 

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/> <script src="https://use.fontawesome.com/1e005331dc.js"></script> <div class='card center-align'> <span class='card-title'>Title</span> <i class='material-icons right'>delete</i> </div> 

Answer 2

Another solution using flex :

 .card { width: 500px; height: 100px; display: flex; align-items: center; } .card-title { flex: 1 } 

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" /> <script src="https://use.fontawesome.com/1e005331dc.js"></script> <div class='card center-align'> <span class='card-title'>Title</span> <i class='material-icons right'>delete</i> </div> 

Answer 3

Just apply the line-height to your span and icon.

 .card { width: 500px; height: 100px; } .card > span.card-title, i.right{ line-height: 90px; } 

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/> <script src="https://use.fontawesome.com/1e005331dc.js"></script> <div class='card center-align'> <span class='card-title'>Title</span> <i class='material-icons right'>delete</i> </div> 

Answer 4

Simplest solution is to give the items in the .card div a line-height the same size of the div.

 .card { width: 500px; height: 100px; vertical-align: middle; } .card * { line-height: 100px !important; } 

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" /> <script src="https://use.fontawesome.com/1e005331dc.js"></script> <div class='card center-align'> <span class='card-title'>Title</span> <i class='material-icons right'>delete</i> </div> 

Note that I had to include !important , which wasn't by choice, but the snippet puts the googleapis link in after my own css.

Answer 5

There are multiple possible answers here, let's go with the quick one;

.card {
    width: 500px;
    height: 100px;
    line-height: 100px;
}

But...

… the drawback is, that if your text ever goes beyond one line in your card, your layout breaks. Better solution, using flexbox:

 .card { width: 500px; min-height: 100px; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; } .card-title { -webkit-box-flex: 1; flex: 1; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/> <div class='card center-align'> <span class='card-title'>Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus</span> <i class='material-icons right'>delete</i> </div> 

Answer 6

maybe this can help you.

https://jsfiddle.net/devefrontend/mn3Ldyc7/7/

<div class="ds-table">
  <div class="ds-table-cell">
   <span class='card-title'>Title</span>
   <i class='material-icons right'>delete</i>
  </div>
</div>

 .card { width: 500px; height: 100px; } .ds-table { display:table; text-align:center; width:100%; height:100%; } .ds-table-cell { display:table-cell; vertical-align:middle; } 

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" /> <script src="https://use.fontawesome.com/1e005331dc.js"></script> <div class='card'> <div class="ds-table"> <div class="ds-table-cell"> <span class='card-title'>Title</span> <i class='material-icons right'>delete</i> </div> </div> </div>