图像不会以 CSS 为中心答案

【问题标题】：Images will not center with CSS图像不会以 CSS 为中心
【发布时间】：2014-03-12 16:59:04
【问题描述】：

刚为我的班级交了一份编程作业，并在与老师交谈时，他告诉我不允许使用我的图像居中。他说我必须使用 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 和 class，但没有任何效果，尝试将标题和图像居中：

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

【问题讨论】：

标签： html css image class centering

【解决方案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 */
 }

【讨论】：

验证更像是一个指导方针。
@Nit 很抱歉评论框的工作方式非常新，但感谢您的输入。
@AlaskanDownSouth 很高兴事情成功了，如果对您有帮助，请点击复选框，随时接受这个答案。

【解决方案2】：

.center {
   text-align: center;
 }

你使用 text.align 而不是 text-align

【讨论】：

【解决方案3】：

您的样式表中也有错字。

.center {
text.align: center;
}

应该是

.center {
text-align:center;
}

【讨论】：