Span next to each other with different size of font-awesome icons ruins the layout

debugcn Published at Dev

John Smith

given this example:

<span index="1" style="width: 100px; height: 100px;" class="_galery_plot"><i class="fa fa-camera-retro fa-2x"></i></span>
<span index="2" style="width: 100px; height: 100px;" class="_galery_plot"><i class="fa fa-camera-retro fa-4x"></i></span>
<span index="3" style="width: 100px; height: 100px;" class="_galery_plot"><i class="fa fa-camera-retro fa-1x"></i></span>
<span index="4" style="width: 100px; height: 100px;" class="_galery_plot"><i class="fa fa-camera-retro fa-4x"></i></span>
<span index="5" style="width: 100px; height: 100px;" class="_galery_plot"><i class="fa fa-camera-retro fa-1x"></i></span>
<span index="6" style="width: 100px; height: 100px;" class="_galery_plot"><i class="fa fa-camera-retro fa-2x"></i></span>
<span index="7" style="width: 100px; height: 100px;" class="_galery_plot"><i class="fa fa-camera-retro fa-1x"></i></span>
<span index="8" style="width: 100px; height: 100px;" class="_galery_plot"><i class="fa fa-camera-retro fa-1x"></i></span>
<span index="9" style="width: 100px; height: 100px;" class="_galery_plot"><i class="fa fa-camera-retro fa-4x"></i></span>
<span index="10" style="width: 100px; height: 100px;" class="_galery_plot"><i class="fa fa-camera-retro fa-3x"></i></span>

the boxes are not at the same line, why?

https://jsfiddle.net/n1sfbkva/

cmrn

You can fix this by adding vertical-align: top; to your ._galery_plot css rules. Alternatively, you could use line-height rather than height - this option will also cause your icons to be aligned to the same baseline.

Here is a code sample showing both options.

span {
  display: inline-block;
  background-color: blue;
  text-align: center;
  cursor: pointer;
}
.option-1 > span {
  width: 100px;
  line-height: 100px;
}
.option-2 > span {
  width: 100px;
  height: 100px;
  vertical-align: top;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="option-1">
  <span><i class="fa fa-camera-retro fa-2x"></i></span>
  <span><i class="fa fa-camera-retro fa-4x"></i></span>
  <span><i class="fa fa-camera-retro fa-1x"></i></span>
</div>
<hr>
<div class="option-2">
  <span><i class="fa fa-camera-retro fa-2x"></i></span>
  <span><i class="fa fa-camera-retro fa-4x"></i></span>
  <span><i class="fa fa-camera-retro fa-1x"></i></span>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.