Search code examples
htmlcssimagecenter

Trouble centering images

I'm having trouble centering my images vertically. I've tried various other solutions posted on this site but they don't appear to work, unless I'm doing something wrong. Here is the relevant CSS:

.boxes {
  width: 145px;
  height: 100%;
  background-color: #fff;
  color: #fff;
  font-family: 'Muli', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 32px;
    text-align: center;
  display: inline-block;
  position: relative;
    border-radius: 10px 10px 10px 10px; 
  border: 1px solid #0081d6;
  margin: 0 2px 12px 12px;
      -webkit-box-shadow: 4px 4px 15px 0px rgba(0,0,0,0.81);
-moz-box-shadow: 4px 4px 15px 0px rgba(0,0,0,0.81);
box-shadow: 4px 4px 15px 0px rgba(0,0,0,0.81);
}
.boxes .heading {
  width: 145px;
  height: 40px;
  color: #fff;
  background-color: #0081d6;
  font-family: 'Muli', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 20px;
  border-radius: 10px 10px 0 0;  
  border-bottom: 4px solid #00589e;
}
  .boxes .heading a {
  color: #fff;
  font-family: 'Muli', sans-serif;
  font-size: 17px;
  font-weight: 400;
}
.boxes .image {
  width: 145px;  height: 140px;
  background-color: #fff;
  margin:0 auto;
}
.boxes .link {
  width: 145px;
  background-color: #0081d6;
  height: 38px;
    line-height: 18px;
    border-radius: 0 0 10px 10px; 
  border-top: 4px solid #00589e;
}
.boxes .link a {
  color: #fff;
  font-family: 'Muli', sans-serif;
  font-size: 14px;
  font-weight: 400;
}

And here is the HTML:

<div class="boxes">
<div class="heading"><a href="http://bananacomputers.co.uk/index.php?route=product/search&amp;search=CAD" target="_blank"><span>Computer Aided Design</span></a></div>

<div class="image">
<p><img alt="Computer Aided Design" height="83" src="http://bananacomputers.co.uk/image/data/5810 MAIN.jpg" width="145" /></p>
</div>

<div class="link"><a href="http://bananacomputers.co.uk/index.php?route=product/search&amp;search=CAD" target="_blank"><span style="font-size:14px;">Dell Precision Workstations</span></a></div>
</div>

Any help would be greatly appreciated. Thanks.

Solution

  • One possible solution is to use display: table and display: table-cell. To try this out add this to your existing css:

    img {
  display: block;
}
.image {
  display: table;
}
p {
  display: table-cell;
  vertical-align: middle;
}