Question

我尝试输入先前问题的建议，但似乎我已经能够成功找到正确的方法来将这些图像与其下方的文字对齐。

<section id="boxes">
    <div class="container">
        <div class="box">
            <img src="./images/dayporter2.jpeg">
            <h3>DAYPORT</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
               do eiusmod
               tempor incididunt ut labore et dolore magna aliqua.
            </p>
        </div>
        <div class="box">   
            <img src="./images/floorcare1.jpeg">
            <div class="box">
            <h3>FLOOR CARE</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
               do eiusmod
               tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="box">
            <img src="./images/janitor2.jpeg">
    </div>
</section>

/* boxes */


#boxes{
    margin-top: 20px;
}


#boxes .box{
    float: left;
    text-align: center;
    width: 30%;
    padding: 10px;
 }

 #boxes .box img{
    width: 90px;
 }`

Answer 1

您似乎有不必要的div标签。

在“ floorcare1.jpeg” img之后删除div标签，此处：

<img src="./images/floorcare1.jpeg">
            <div class="box"> //remove this

Answer 2

    <div class="box">   
        <img src="./images/floorcare1.jpeg">
        <div class="box"> <!-- The probleme is here -->
            <h3>FLOOR CARE</h3>

由于图像正下方的.box元素向左浮动，因此将迫使图像向左浮动，因为他们的兄弟姐妹.box占据了父级的30％，剩余的70其.box父元素的宽度百分比。您必须删除.box元素，所有内容才能正常运行。您必须关闭所有打开的标记的另一个问题

<section>
    <div class="container">
        <div class="box">
            <!-- First box -->
        </div>
        <div class="box">
            <!-- Second box -->
        </div>
        <div class="box">
            <!-- Third box -->
        </div>
    </div>
</section>

未对齐的图片下方带有文字？ CSS / HTML

2 个答案: