Question

刚刚上课为我的班级做了一个编程任务，当他告诉我我不允许使用中心我的图像时，正在和老师交谈。他说我必须使用id和class然后在stylesheet / CSS中居中。这对我来说毫无意义，当我使用内联它完美的工作但我已经尝试了我知道的所有内容在样式表中，没有任何作用。我附上了我的代码中的两个例子：

这完全适用于居中图像，但教授说这是不允许的：

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

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 */
 }

Answer 2

.center {
   text-align: center;
 }

您使用的是text.align而不是text-align

Answer 3

你的样式表中也有拼写错误。

.center {
text.align: center;
}

应该是

.center {
text-align:center;
}

图像不会以CSS为中心

3 个答案: