Alex W. Alex W. - 1 month ago 5
CSS Question

vertically align a div and a span using css

please see the jsfiddle project here . How to horizontally align the box and the label?



.box {
display: inline-block;
height: 20px;
width: 30px;
border: 1px solid;
}

.legend {
horizontal-align: middle;
}

<div class="legend">
<div class="box" style="background-color: red;">
</div>
<span>Alabama</span>
</div>




Answer

You can float the box instead of displaying it inline. There's a couple different ways to align these.

https://jsfiddle.net/cckxkvov/5/

.box {
  float: left;
  height: 20px;
  width: 30px;
  border: 1px solid;
}

.legend {
  horizontal-align: middle;
}

span {
  display: inline-block;
  line-height: 20px; 
}
Comments