Page Widget How to - Vertical Align an IMAGE to the left of text








Question

We would like to know how to vertical Align an IMAGE to the left of text.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.wraptocenter {<!--   www  .  j  a  v  a 2  s. com-->
  float: left;
  margin: 0 10px 5px 0;
}

.wraptocenter>div {
  height: 120px;
  width: 120px;
  background: orange;
  display: table-cell;
  vertical-align: middle
}

.wraptocenter img {
  max-height: 120px;
  width: 120px;
  display: block
}
</style>
</head>
<body>
  <div class="wraptocenter">
    <div>
      <img src="http://www.java2s.com/style/download.png" />
    </div>
  </div>
  <div class="description">Lorizzle ipsum dolor sit amizzle,
    tellivizzle adipiscing fo shizzle. Owned sapizzle velizzle, bizzle
    volutpizzle, nizzle quis, gangster vizzle, arcu. Pellentesque eget
    tortizzle. Sizzle erizzle. Fusce fo shizzle mah nizzle fo rizzle, mah
    home g-dizzle dolizzle dapibus brizzle tempizzle tempor. For sure
    mammasay mammasa mamma oo sa its fo rizzle izzle turpis. Break it down
    in tortor. Pellentesque eleifend rhoncizzle nisi. In black i'm in the
    shizzle ma nizzle dictumst. Donec dapibus. Curabitizzle shiznit urna,
    pretizzle dang, mattizzle own yo', eleifend vitae, nunc. Pimpin'
    suscipizzle. Integer sempizzle shiz sed fo shizzle my nizzle.</div>
</body>
</html>

The code above is rendered as follows: