CSS Layout How to - Justify image navigation

Question

We would like to know how to justify image navigation.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body {<!-- w  w  w.  ja  v  a2 s.  c  o m-->
  margin: 60px 20px;
}

.prevNext {
  text-align: justify;
  border: 1px solid #ccc;
  line-height: 0;
}

.prevNext a {
  display: inline-block;
  line-height: 16px;
  vertical-align: top;
  position: relative;
  padding: 4px;
}

.prevNext img {
  vertical-align: top;
}

.prevNext:after {
  content: '';
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
</style>
</head>
<body>
  <div class="prevNext">
    <a class="prev" href="#"> <img
      src="http://www.famfamfam.com/lab/icons/silk/icons/arrow_left.png"
      alt="Previous" />
    </a> <a class="up" href="#"> <img
      src="http://www.famfamfam.com/lab/icons/silk/icons/arrow_join.png"
      alt="Contents" />
    </a> <a class="next" href="#"> <img
      src="http://www.famfamfam.com/lab/icons/silk/icons/arrow_right.png"
      alt="Next" />
    </a>
  </div>
</body>
</html>

The code above is rendered as follows: