0

I am trying to center these images in a div, but I haven't been able to do that yet. I have tried text-align, align, and floating clearly doesn't work. I have also tried positioning the table to relative. How would I make this centered at the bottom of the page?

.sidebar2 {
 
 width: 120px;
 background: #ffffff;
 padding-bottom: 10px;
 text-align: center;
    }

    .sidebar2 table {
 position:
    }
<div class="sidebar2">
    <h4> Sponsored by: </h4>
    <!-- each image links to webpage of the sponsor -->
    <table>
    <tr>
    <td>
    <a href="http://lhs.liberty.k12.mo.us/T4t" target="_blank"><img src="T4t.jpg" alt="T4t" width="95" height="90"/></a>
    </td>
    <td>
    <a href="http://cerner.com/" target="_blank"><img src="cerner-logo1.jpg" alt=" Cerner" width="95" height="90"/></a>
    </td>
    <td>
    <a href="http://www.pltw.org/" target="_blank"><img src="pltw.jpg" alt="Project Lead The Way" width="95" height="90"/></a>
    </td>
    <td>
    <a href="http://www.jewell.edu/home" target="_blank"><img src="william-jewell-college.jpg" alt="William Jewell College" width="95" height="90"/></a>
    </td>
    <td>
    <a href="http://www.ci.liberty.mo.us/" target="_blank"><img src="liberty.jpg" alt="City of Liberty" width="95" height="90"/></a>
    </td>
    <td>
    <a href="http://www.liberty.k12.mo.us/" target="_blank"><img src="lps-logo.jpg" alt=" Liberty Public Schools" width="95" height="90"/></a>
    </td>
    <td>
    <a href="http://www.libertyhospital.org/" target="_blank"><img src="liberty hospital.jpg"    alt="Liberty Hospital" width="95" height="90"/></a>
    </td>
    </tr>
    </table>
    </div>
misterManSam
  • 24,303
  • 11
  • 69
  • 89
KJ Stahl
  • 47
  • 1
  • 8

3 Answers3

0

This might help you.

img { display: block; margin: 0 auto; }

http://css-tricks.com/forums/topic/how-to-make-an-image-center-horizontally-inside-a-bigger-div-using-only-css/

user2687482
  • 215
  • 3
  • 17
  • It would but I have more than one image in the page so I can't just throw it in to img. I ended up doing this .sidebar2 img { display: block; margin: 0 auto; } – KJ Stahl Sep 17 '14 at 18:10
0

You're much better off using a list for this sort of thing. Below is a snippet which easily centers the images, which are contained in the lis of a ul.

.sidebar {
  width: 120px;
  background: #fff;
  padding-bottom: 10px;
  text-align: center;
}

.sidebar ul {
  list-style-type: none;
  padding: 0px;
}
<div class="sidebar" style="border: 1px solid blue;">
<h4> Sponsored by: </h4>
<!-- each image links to webpage of the sponsor -->
<ul class="sidebar-list">
<li>
<a href="http://en.wikipedia.org/" target="_blank"><img src="http://upload.wikimedia.org/wikipedia/commons/e/e1/Wikipedia-logo_50px.png" alt="Wikipedia"/></a>
</li>
<li>
<a href="http://lhs.liberty.k12.mo.us/T4t" target="_blank"><img src="T4t.jpg" alt="T4t" width="95" height="90"/></a>
</li>
<li>
<a href="http://cerner.com/" target="_blank"><img src="cerner-logo1.jpg" alt=" Cerner" width="95" height="90"/></a>
</li>
<li>
<a href="http://www.pltw.org/" target="_blank"><img src="pltw.jpg" alt="Project Lead The Way" width="95" height="90"/></a>
</li>
<li>
<a href="http://www.jewell.edu/home" target="_blank"><img src="william-jewell-college.jpg" alt="William Jewell College" width="95" height="90"/></a>
</li>
<li>
<a href="http://www.ci.liberty.mo.us/" target="_blank"><img src="liberty.jpg" alt="City of Liberty" width="95" height="90"/></a>
</li>
<li>
<a href="http://www.liberty.k12.mo.us/" target="_blank"><img src="lps-logo.jpg" alt=" Liberty Public Schools" width="95" height="90"/></a>
</li>
<li>
<a href="http://www.libertyhospital.org/" target="_blank"><img src="liberty hospital.jpg"    alt="Liberty Hospital" width="95" height="90"/></a>
</li>
</ul>
</div>
Chris Middleton
  • 5,654
  • 5
  • 31
  • 68
0

There is no need for the <table> or any extra markup. In your example, the table has a single row and will overflow its parent div.

Simplest solution:

  • Remove the table elements

  • Add appropriate bottom margin on img and top / bottom padding on <h4>

  • text-align: center will center the images in .sidebar2

Note: The images are affected by text-align: center because by default they are display: inline

HTML / CSS

* {
    margin: 0;
    padding: 0;
}
body {
    background: #EEE;
}
.sidebar2 { 
    width: 120px;
    background: #ffffff;
    text-align: center;
}
.sidebar2 img {
    margin-bottom: 10px;
}
.sidebar2 h4 {
    padding: 10px 0;
}
<div class="sidebar2">
    <h4> Sponsored by: </h4>
    <!-- each image links to webpage of the sponsor -->
     <a href="http://lhs.liberty.k12.mo.us/T4t" target="_blank">
         <img src="http://www.placehold.it/90X90" alt="T4t" width="95" height="90"/>
     </a>
        
     <a href="http://cerner.com/" target="_blank">
         <img src="http://www.placehold.it/90X90" alt=" Cerner" width="95" height="90"/>
     </a>
        
     <a href="http://www.pltw.org/" target="_blank">
        <img src="http://www.placehold.it/90X90" alt="Project Lead The Way" width="95" height="90"/>
     </a>
        
     <a href="http://www.jewell.edu/home" target="_blank">
         <img src="http://www.placehold.it/90X90" alt="William Jewell College" width="95" height="90"/>
     </a>
        
     <a href="http://www.ci.liberty.mo.us/" target="_blank">
         <img src="http://www.placehold.it/90X90" alt="City of Liberty" width="95" height="90"/>
     </a>
        
     <a href="http://www.liberty.k12.mo.us/" target="_blank">
         <img src="http://www.placehold.it/90X90" alt=" Liberty Public Schools" width="95" height="90"/>
     </a>
        
     <a href="http://www.libertyhospital.org/" target="_blank">
         <img src="http://www.placehold.it/90X90" alt="Liberty Hospital" width="95" height="90"/>
     </a>
</div>
misterManSam
  • 24,303
  • 11
  • 69
  • 89