Question

我试图将这些图像放在div中，但我还没能做到。我试过文字对齐，对齐和浮动显然不起作用。我也尝试将表定位到亲戚。我如何将其置于页面底部？

.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>

Answer 1

这可能会对你有所帮助。

img {display：block;保证金：0自动; }

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

Answer 2

你最好使用列表来做这类事情。下面是一个片段，可以轻松地居中显示图片，这些图片包含在li的{{1}}中。

ul

.sidebar {
  width: 120px;
  background: #fff;
  padding-bottom: 10px;
  text-align: center;
}

.sidebar ul {
  list-style-type: none;
  padding: 0px;
}

Answer 3

不需要<table>或任何额外标记。在您的示例中，该表有一行，并将溢出其父div。

最简单的解决方案：

删除表格元素
在img上添加适当的下边距，在<h4>上添加上/下填充
text-align: center会将图片置于.sidebar2

注意：图片受text-align: center影响，因为默认情况下它们为display: inline

HTML / CSS

＆＃13;

* {
    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;
}

＆＃13;

<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>

＆＃13;

将图像置于div中

3 个答案: