无法使用 CSS 在 HTML 页面上移动文本答案

【问题标题】：Cant get text to move on HTML page with CSS无法使用 CSS 在 HTML 页面上移动文本
【发布时间】：2020-08-31 00:49:01
【问题描述】：

对 HTML 和 CSS 非常陌生。无法让我的文字在我的图像下移动。我有 4 张图片，在它们下面我想成为一段文字。这可能是一个愚蠢的问题，所以请原谅我的无知。我无法让文本移动到我想要的位置（并且 CSS 文件中的值，按像素计算，是错误的，但我什至无法让其中 3 个出现以尝试将它们调整为在我的导航栏或图像下？）。图像以正确的顺序显示，格式正确。

试图看起来像这样： https://gyazo.com/c3de4fa6832107a8f16300cbacca47f8

提前致谢

这是我的 CSS/HTML 文件：

.img {
    position: relative;
    float: left;
    width:  250px;
    height: 250px;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
    padding-top: 100px;
}

.text1 {
	position:relative;
	left:100px;
	top:400px: 
}
.text2 {
	position:relative;
	left:200px;
	top:400px: 
}
.text3 {
	position:absolute;
	left:300px;
	top:400px: 
}
.text4 {
	position:absolute;
	left:400px;
	top:400px: 
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>About</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="about.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="index.html">Title</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="links.html">Links</a></li>
        <li><a href="#">LinkedIn</a></li>
        <li><a href="#">Github</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div class="container">
	<img src="images/xxx.jpg" class="img-circle img">
	
	<img src="images/xxx.jpg" class="img-circle img">

	<img src="images/xxx.jpg" class="img-circle img">

	<img src="images/xx.jpg" class="img-circle img">



	<div id="text1">
		 <p>TEXT UNDER PIC 1</p>
	</div >
    <div id="text1">
		 <p>TEXT UNDER PIC 2</p>
	</div >
    <div id="text1">
		 <p>TEXT UNDER PIC 3</p>
	</div >
    <div id="text1">
		 <p>TEXT UNDER PIC 4</p>
	</div >


</div>

</body>
</html>

【问题讨论】：

标签： html css text alignment

【解决方案1】：

http://codepen.io/lostdino/pen/LpKKra

我不确定您是否想保留您的 HTML 结构，或者它是否可以修改，所以我只是在您提供的限制范围内工作。我所做的是删除你的浮动，而是使用display: inline-block，它将水平而不是垂直堆叠在容器中的元素。你可以看到我还使用了[id*="text"]，这将允许捕获具有包含“文本”的 id 的任何元素。我建议也不要使用像素，而是选择响应速度更快的单位，例如百分比或 rem。如果您认为我向您展示我将如何解决这个问题很有价值，我很乐意为您提供一个简单的示例。我希望这会有所帮助。

.img {
    position: relative;
    display:inline-block;
    width:  250px;
    height: 250px;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
    padding-top: 100px;
}
.text1 {
    position:relative;
    left:100px;
    top:400px: 
}
[id*="text"] {
  width: 250px;
  display: inline-block;
}

关于其他答案，假设文本和图像之间存在图像和标题关系，那么解决方案的可能改进如下：

http://codepen.io/lostdino/pen/PPrryZ

.gallery img {
  position:relative;
  width: 100%;
  height: 100%;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
}
.gallery {
  padding-top: 100px;
  padding-left: 10px;
  position:relative;
}
.gallery > figure {
    position: relative;
    display:inline-block;
    width:  250px;
    height: 250px;
}

画廊的 HTML 重组如下：

  <div class="gallery">
    <figure>
      <img src="" alt="" class="gallery-image" />
      <figcaption class="gallery-image-caption">TEXT UNDER PIC 1</figcaption>
    </figure>
    <figure>
      <img src="" alt="" class="gallery-image" />
      <figcaption class="gallery-image-caption">TEXT UNDER PIC 2</figcaption>
    </figure>
    <figure>
      <img src="" alt="" class="gallery-image" />
      <figcaption class="gallery-image-caption">TEXT UNDER PIC 3</figcaption>
    </figure>
    <figure>
      <img src="" alt="" class="gallery-image" />
      <figcaption class="gallery-image-caption">TEXT UNDER PIC 4</figcaption>
    </figure>
  </div>

【讨论】：

这非常适合我所拥有的！您是否同意其他人的观点，即我应该将图像和文本都放在一个 div 中？非常感谢，非常感谢！
这取决于文本和图像之间的关系，如果它们不相关，那么我们应该将它们放在单独的容器 div 甚至部分元素中：<section></section>。但是，如果关系是图像和标题，那么我们应该将它们包装在带有标题的图形标签中，如下所示：<figure><img><figcaption>text 1</figcaption></figure> 我将在上面的答案中添加一个示例：)
@Peter_McArthur 非常感谢您花时间解释并向我展示实现。在我继续学习的过程中，我会牢记这一点！很明显，我还有路要走！再次表达我的感激之情。
@Mike 我很高兴能帮上忙 :)

【解决方案2】：

您的文本未按您希望的方式对齐的原因是，<p> 和 <div> 默认是块级元素，这意味着它们将填充空间并从新行开始。要解决此问题，您可以将 display 属性更改为内联。

也就是说，您的做法是错误的，您没有将图片和标题组合在一起。您的结构应该更符合以下原则：

<div class="container">
    <!-- Image One -->
    <div class="image-container">
        <img src="#.jpg" alt="a" class="img-circle img" />

        <div class="image-text">
            <p>Lorem ipsum...</p>
        </div>
    </div>

    <!-- Image Two -->
    <div class="image-container">
        <img src="#.jpg" alt="a" class="img-circle img" />

        <div class="image-text">
            <p>Lorem ipsum...</p>
        </div>
    </div>

    <!-- Image Three -->
    <div class="image-container">
        <img src="#.jpg" alt="a" class="img-circle img" />

        <div class="image-text">
            <p>Lorem ipsum...</p>
        </div>
    </div>
</div>

然后，您将在 .image-container 类上设置所需的宽度，您的图像和标题将随之而来。

【讨论】：

【解决方案3】：

您的段落没有按正确的顺序嵌套以实现此目的。确保将段落标签放在包含图像的 div 标签内。

另外，刷新浏览器时使用检查元素工具。在 Google Chrome 中，转到查看、开发人员，然后选择开发人员工具。浏览器底部将出现一个新窗口。当您将鼠标悬停在 font-end 界面上时，页面将突出显示您的 html 嵌套结构。

希望对您有所帮助，如果您还有其他问题，请告诉我！

【讨论】：