Question

我无法在谷歌上找到答案，而且我对CSS相对较新，而我正试图了解它。例如，我在屏幕中央有一个图像，我想移动图像下方的文本。我在下面使用了一个示例代码，并且想知道这样做是不是很糟糕，并且有正确的方法吗？

h2{
    position: absolute;
    padding: 5px;
    right: 70%;
    bottom: 30%; 
}

编辑：

这是HTML代码：

<div class="container">
    <img src="images/horse4.jpg" class="slide" alt="">
    <img src="images/horse3.jpg" class="slide" alt="">
    <img src="images/horse2.jpg" class="slide" alt="">               
    <img src="images/horse1.jpg" class="slide" alt="">
    <h2>Welcome!</h2>
</div>

继承人的CSS：

.slide {
    position:absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    padding: 3px;
    border-top: 2px dotted black;
    border-bottom: 2px dotted black;
}

Answer 1

我在屏幕中央有一个图像，我想移动图像下面的文字

在这种情况下，与图像相关的文本位置会因窗口大小的不同而不同，可能会重叠或出现巨大的间隙。

最好的方法是让一个容器居中，然后将图像和文本放在其中。始终尽量使用尽可能少的不规则元素。这样，我们只对一个充当容器的元素进行处理，而不是绝对定位图像和文本，然后在我们正确容纳容器后，我们不必担心它们的位置。

以下是一个例子：

#container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #eee;
  box-shadow: 0 0 10px #aaa;
  width: 200px;
  height: 180px;
  text-align: center;
}
img {
  max-height: 150px;
}
p {
  margin: 0
}

<div id="container">
  <img src="http://img4.wikia.nocookie.net/__cb20120728235111/annoyingorange/images/b/b3/Super_mario.png" />
  <p>Hey there</p>
</div>

并对你的问题给出最终答案：不，只要你仍然可以完全控制布局，这不是一个坏习惯。

更新

这是一个稍微基于您的代码的示例（认为您已准备好滑块）：

.container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #eee;
  box-shadow: 0 0 10px #aaa;
  width: 256px;
  height: 300px;
  text-align: center;
  border-top: 2px dotted black;
  border-bottom: 2px dotted black;
  overflow: hidden;
} 
#slider {
  width: 512px;
  height: 256px;
  position: absolute;
  left: 0px;
  transition: left 0.5s linear;
  font-size: 0;
}
#slider:hover {
  left: -256px;
}
h2 {
  margin-top: 256px;
}

<div class="container">
  <div id="slider">
  <img src="http://png-4.findicons.com/files/icons/2297/super_mario/256/paper_mario.png" class="slide" alt="">
  <img src="http://icons.iconarchive.com/icons/ph03nyx/super-mario/256/Mario-Profile-icon.png" class="slide" alt="">
    </div>
  <h2>Welcome!</h2>
</div>

使用Right，Left，Top，Bottom定位文本不良练习？

1 个答案: