Can't verticall center an image

Hi,
The only property that works on this image (bottom right MTA logo in footer) is margin-top. Being relegated to only this property I believe will cause positioning problems elsewhere at different breakpoints.
The obvious choice seemed to be vertical-align but this won’t work for some reason. Does anyone have any ideas on how to get this image to vertically align in the middle of the footer?

http://temp.osborneparkautorepairs.com.au/

Any help appreciated.

Hi,

The images are floated and floats are removed from the flow so will not automatically align with other content. The only way you can move them is to use margins (or nudge with small amounts of relative positioning).

For automatic alignment of both images and the text in that footer you woud need the display table approach.

Here is an example.

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.logofoot {
	display:table;
	width:100%;
}
.tc {
	display:table-cell;
	vertical-align:middle;
	padding:10px 0;
}
.logoleft {text-align:right;}
.footer-details{padding:10px;width:100%;background:#f9f9f9;}
.logofoot img{display:inline;}

@media screen and (max-width:600px){
	.logofoot,.logofoot .tc{display:block;width:auto;text-align:center;}	
}
</style>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-12 col-lg-12">
      <div class="logofoot">
        <div class="tc logoleft"> <img src="http://temp.osborneparkautorepairs.com.au/wp-content/uploads/2016/01/iame-logo.png"> </div>
        <div class="tc footer-details">
          <p>Keith Adamsons Automotive Repairs</p>
        </div>
        <!-- /footer-details -->
        <div class="tc logoright"> <img src="http://temp.osborneparkautorepairs.com.au/wp-content/uploads/2016/01/mta-logo.png"> </div>
      </div>
      <!-- /well blue-well --> 
    </div>
  </div>
</div>
</body>
</html>

Of course that means you now have to control things hence the media query to revert to one column at smaller widths.

The benefit of that approach is the vertical alignment of all three sections in that footer is now automatic and won’t matter what size images and what content you insert (and individual alignment is also possible).

This is the big drawback of the bootstrap floated grid and I hardly ever use floats these days apart from when I want text around an image etc.

Thanks Paul, just trying to digest this.

The table property is one handy bit of kit :+1:
I saw it described as the ‘anti-hero’ of CSS and that sums it up well I think.

Thanks again :grinning:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.