html - 图片不会以 CSS 居中

Question

刚交了我类的编程作业，当他告诉我不允许我使用居中图像时，他正在和老师交谈。他说我必须使用 id 和 class，然后在样式表/CSS 中居中。这对我来说毫无意义，当我使用内联时它工作得很好但我已经尝试了我所知道的一切以在样式表中居中但没有任何效果。我附上了我的代码中的 2 个示例:

这对居中图像非常有效，但教授说这是不允许的:

<h5>Back View</h5>
    <div style="text-align: center"/>
    <a href="BackViewT-Shirt.html" target="_blank">
      <img src="http://i1293.photobucket.com/albums/b581/AlaskanAdventureApparel/photo1_zpsff666fce.jpg" height="400" width="300" alt="Back View Alaskan Adventure T-Shirt"/>
    </a>

然后尝试使用 id 和类但没有任何效果，尝试将标题和图像居中:

HTML:

<h5 class="center">Back View</h5>
    <a href="BackViewT-Shirt.html" target="_blank">
      <img src="http://i1293.photobucket.com/albums/b581/AlaskanAdventureApparel/photo1_zpsff666fce.jpg" height="400" width="300" alt="Back View Alaskan Adventure T-Shirt"/>
    </a>

样式表:

.center {
text.align: center;
}

Answer 1

您的标记有误，您删除了容器 div:

<h5>Back View</h5>
<div class="center">
 <a href="BackViewT-Shirt.html" target="_blank">
  <img src="http://i1293.photobucket.com/albums/b581/AlaskanAdventureApparel/photo1_zpsff666fce.jpg" height="400" width="300" alt="Back View Alaskan Adventure T-Shirt"/>
 </a>
</div>

此外，您的 CSS 有错别字(始终有效!)

.center {
   text-align: center;
}

此处，div 对齐其内联内容。

顺便说一句，你也可以这样做:

a{
  display:block;
  width:200px; /* This should be the width of the image */
  margin:0 auto; /* This cryptic statement will center block-level elements */
 }