php和html - 如何水平对齐

Question

我只想询问如何将它们水平对齐。

输出：

源代码：
mysqli_fetch_array（）函数连接到mysql，将结果行作为关联数组提取。

<?php

$fetch_vehicle = mysqli_query($connect, "SELECT * FROM vehicle") or die("Error: Could not fetch rows!".mysqli_error($connect));

echo'<br><br><br>';

while($row = mysqli_fetch_array($fetch_vehicle)) {

    if(strcasecmp($row['brand'], 'toyota') == 0)

    echo '<div id="div" style = "margin-top: 15px; margin-left: 200px;"> 
    <img src="../images/car/'. $row['image'].'" height="200" width="400" class="image"
    border="0" alt=""/> 
    <h1 style="color:white; margin-left: 10; margin-top: -20px;">'.$row["brand"].' '.$row["model"].'</h1>
    '.$row['description'].' 
    </div><br><br><br><br>';

}
?>

Answer 1

首先，这将创建多个#div div，并且ID只能存在于页面上一次。所以我把它改成了一个班级。其次，您应该从height中删除width和img属性，然后将其放入CSS中。没有必要，但建议作为最佳做法。然后，您希望将.div设置为width或max-width与img宽度匹配，以便这些div不会超出宽度图片。从那里，这里有一些解决方案，将它们放在一个水平行。我假设你的意思是“水平对齐”。

您可以在div上设置float: left。

.div {
  max-width: 400px;
  float: left;
}
.image {
  width: 400px;
  height: 200px;
}
.div:nth-child(3n + 1) {
  clear: left;
}

<div class="div" style="margin-top: 15px; margin-left: 200px;">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="image" border="0" alt="" />
  <h1 style="color:white; margin-left: 10; margin-top: -20px;">title</h1>
  text text text text text text text text text text text text text text text text text text text text text
</div>

<div class="div" style="margin-top: 15px; margin-left: 200px;">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="image" border="0" alt="" />
  <h1 style="color:white; margin-left: 10; margin-top: -20px;">title</h1>
  text text text text text text text text text text text text text text text text text text text text text
</div>
<div class="div" style="margin-top: 15px; margin-left: 200px;">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="image" border="0" alt="" />
  <h1 style="color:white; margin-left: 10; margin-top: -20px;">title</h1>
  text text text text text text text text text text text text text text text text text text text text text
</div>

<div class="div" style="margin-top: 15px; margin-left: 200px;">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="image" border="0" alt="" />
  <h1 style="color:white; margin-left: 10; margin-top: -20px;">title</h1>
  text text text text text text text text text text text text text text text text text text text text text
</div>
<div class="div" style="margin-top: 15px; margin-left: 200px;">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="image" border="0" alt="" />
  <h1 style="color:white; margin-left: 10; margin-top: -20px;">title</h1>
  text text text text text text text text text text text text text text text text text text text text text
</div>

<div class="div" style="margin-top: 15px; margin-left: 200px;">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="image" border="0" alt="" />
  <h1 style="color:white; margin-left: 10; margin-top: -20px;">title</h1>
  text text text text text text text text text text text text text text text text text text text text text
</div>
<div class="div" style="margin-top: 15px; margin-left: 200px;">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="image" border="0" alt="" />
  <h1 style="color:white; margin-left: 10; margin-top: -20px;">title</h1>
  text text text text text text text text text text text text text text text text text text text text text
</div>

<div class="div" style="margin-top: 15px; margin-left: 200px;">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="image" border="0" alt="" />
  <h1 style="color:white; margin-left: 10; margin-top: -20px;">title</h1>
  text text text text text text text text text text text text text text text text text text text text text
</div>
<div class="div" style="margin-top: 15px; margin-left: 200px;">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="image" border="0" alt="" />
  <h1 style="color:white; margin-left: 10; margin-top: -20px;">title</h1>
  text text text text text text text text text text text text text text text text text text text text text
</div>

或将div设置为display: inline-block。

.div {
  max-width: 400px;
  display: inline-block;
}
.image {
  width: 400px;
  height: 200px;
}

<div class="div" style="margin-top: 15px; margin-left: 200px;">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="image" border="0" alt="" />
  <h1 style="color:white; margin-left: 10; margin-top: -20px;">title</h1>
  text text text text text text text text text text text text text text text text text text text text text
</div>

<div class="div" style="margin-top: 15px; margin-left: 200px;">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="image" border="0" alt="" />
  <h1 style="color:white; margin-left: 10; margin-top: -20px;">title</h1>
  text text text text text text text text text text text text text text text text text text text text text
</div>

或者您可以引入父元素并在父元素上使用display: flex。如果通过“水平对齐”，您希望将这些水平居中，请在justify-content: center;父级上使用.flex。

.flex {
  display: flex;
  flex-wrap: wrap;
}
.div {
  max-width: 400px;
}
.image {
  width: 400px;
  height: 200px;
}

<div class="flex">
  <div class="div" style="margin-top: 15px; margin-left: 200px;">
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="image" border="0" alt="" />
    <h1 style="color:white; margin-left: 10; margin-top: -20px;">title</h1> text text text text text text text text text text text text text text text text text text text text text
  </div>

  <div class="div" style="margin-top: 15px; margin-left: 200px;">
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="image" border="0" alt="" />
    <h1 style="color:white; margin-left: 10; margin-top: -20px;">title</h1> text text text text text text text text text text text text text text text text text text text text text
  </div>
</div>