Question

所以我正在建立一个网站，我试图将我的图像放在中心或稍微下方，但它只是不会发生。每次我尝试它都停留在这里的t`enter代码

<img src="http://i2.wp.com/ajournalofmusicalthings.com/wp-content/uploads/Question-mark.png?resize=512%2C350" alt="..." class="img-thumbnail">
<img src="http://i2.wp.com/ajournalofmusicalthings.com/wp-content/uploads/Question-mark.png?resize=512%2C350" alt="..." class="img-thumbnail">
<img src="http://i2.wp.com/ajournalofmusicalthings.com/wp-content/uploads/Question-mark.png?resize=512%2C350" alt="..." class="img-thumbnail">



.image-thumbnail {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: #3B393E;
}

我不明白我做错了什么。

Answer 1

然后在div中换行并使用text-align:center来完成这项工作：

＆＃13;

.image-thumbnail{transform:translateX(-50%) translateY(-50%); background-color: #3B393E;}

.myclass {
  width: 100%;
  text-align: center;
}

＆＃13;

<div class="myclass">

  <img src="http://i2.wp.com/ajournalofmusicalthings.com/wp-content/uploads/Question-mark.png?resize=512%2C350" alt="..." class="img-thumbnail">
      <img src="http://i2.wp.com/ajournalofmusicalthings.com/wp-content/uploads/Question-mark.png?resize=512%2C350" alt="..." class="img-thumbnail">
      <img src="http://i2.wp.com/ajournalofmusicalthings.com/wp-content/uploads/Question-mark.png?resize=512%2C350" alt="..." class="img-thumbnail">
  
</div>

＆＃13;

Answer 2

添加内置于bootstrap的中心类

<div class="center">

  <img src="http://i2.wp.com/ajournalofmusicalthings.com/wp-content/uploads/Question-mark.png?resize=512%2C350" alt="..." class="img-thumbnail">
      <img src="http://i2.wp.com/ajournalofmusicalthings.com/wp-content/uploads/Question-mark.png?resize=512%2C350" alt="..." class="img-thumbnail">
      <img src="http://i2.wp.com/ajournalofmusicalthings.com/wp-content/uploads/Question-mark.png?resize=512%2C350" alt="..." class="img-thumbnail">

</div>

Answer 3

问题在于您使用的选择器。类名是img-thumbnail，你使用image-thumbnail，发生的事情是你因为拼写错误的类名选择器而无法定位你想要选择的元素。此外，如果您希望它垂直居中，则顶部位置需要为50％。

.img-thumbnail{position: absolute;top: 50%;left: 50%;transform:translateX(-50%) translateY(-50%); background-color: #3B393E;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<img src="http://i2.wp.com/ajournalofmusicalthings.com/wp-content/uploads/Question-mark.png?resize=512%2C350" alt="..." class="img-thumbnail">
      <img src="http://i2.wp.com/ajournalofmusicalthings
</body>

bootstrap3中的图像不会移动到中心

3 个答案: