CSS 无法让文本在 HTML 页面上移动

Question

对 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>

Answer 1

您的文本未按您希望的那样对齐的原因是因为 <p> 和 <div> 默认是块级元素，这意味着它们将填充 space 和从新的线路开始。要解决此问题，您可以将 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 class 上设置您想要的宽度，您的图片和标题将随之设置。

Answer 2

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

我不确定你是否想保留你的 HTML 结构，或者它是否可以修改，所以我只是在你提供的限制范围内工作。我所做的是删除你的花车，而是使用 display: inline-block ，它将水平而不是垂直地堆叠元素在它们的容器中。您可以看到我还使用了 [id*="text"]，这将允许捕获 ID 包含 'text' 的任何元素。我建议也远离像素并选择更灵敏的单位，例如百分比或 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>

Answer 3

您的段落嵌套顺序不正确，无法实现此目的。确保将段落标记放在包含图像的 div 标记内。

此外，请在刷新浏览器时使用检查元素工具。在 Google Chrome 中，转到查看、开发人员和 select 开发人员工具。一个新的 window 将出现在浏览器的底部。当您将鼠标悬停在字体结束界面上时，该页面将突出显示您的 html 嵌套结构。

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

CSS 无法让文本在 HTML 页面上移动

Cant get text to move on HTML page with CSS

html

css

text

alignment