Question

我正在尝试创建一个网站，其中有四个图像，上面有四个图像，下面有四个描述。对于标题和描述，我使用/创建了两个不同的表。使用边距相应地放置图像。这些表在我的计算机上看起来不错，但当转移到更大的屏幕时，它们会向左移动。我发现在所有大屏幕上让它们兼容并且看起来很好的方法是将表格放在中心位置。我尝试过使用align：center作为表，包括style =“text-align：center;”但都没有奏效。我该如何解决这个问题。在此先感谢您的帮助。非常感谢。以下是我目前的代码：

.mobile_title {
  margin-top: 25px;
  font-size: 25px;
  color: black;
  margin-left: 105px;
  font-family: 'Oswald', sans-serif;
}

.text_under {
  font-size: 15px;
  color: grey;
  font-family: 'Oswald', sans-serif;
  width: 150;
  text-align: center;
}

.mobile {
  margin-top: 30px;
  margin-left: 160px;
}

.laptop {
  margin-left: 140px;
  margin-top: 45px;
}

.coding {
  margin-left: 155px;
  margin-top: 45px;
}

.database {
  margin-left: 150px;
  margin-top: 45px;
}

.load {
  border-collapse: separate;
  border-spacing: 130px 10px;
}

.kbg {
  border-collapse: separate;
  border-spacing: 155px 10px;
}

<body>

  <table class="load">
    <tr>
      <td class="mobile_title">Mobile Development</td>
      <td class="mobile_title">Web Development</td>
      <td class="mobile_title">Backend Development</td>
      <td class="mobile_title">Database Creation</td>
    </tr>
  </table>

  <img src="mobile.png" width=160 height=120 class="mobile">

  <img src="laptop.png" width=150 height=100 class="laptop">

  <img src="coding.png" width=150 height=100 class="coding">

  <img src="database.png" width=150 height=110 class="database">

  <table class="kbg">
    <tr>
      <td class="text_under">The creation of applications for iOS and Android devices. This also includes the mobile optimization of websites, making them responsive on all devices.</td>
      <td class="text_under">The creation of web-based sites using multiple programming languages including HTML, CSS, and Custom word press. These websites, after the creation stages, are hosted online for all to observe.</td>
      <td class="text_under">The process and supporting information that websites need in order to perform wanted tasks. The information is written in codes, the process called programming.</td>
      <td class="text_under">The location of storage of all of the supporting information. This also saves all important files including the back ends of developing websites and/or mobile applications.</td>
    </tr>
  </table>
</body>

Answer 1

根据我的评论，使用flexbox比表格更容易。

.load-wrap {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  font-family: 'Oswald', sans-serif;
  /*to center - optional */
  width: 75%;
  margin: auto
}

.load {
  flex: 1;
  padding: 20px;
  box-sizing:border-box
}

.mobile_title {
  margin-top: 25px;
  font-size: 25px;
  color: black;
}

.text_under {
  font-size: 15px;
  color: grey;
}

.mobile {
  margin-top: 30px;
}

<div class="load-wrap">
  <div class="load">
    <div class="mobile_title">Mobile Development</div>
    <img src="//placehold.it/160x120" class="mobile">
    <div class="text_under">The creation of applications for iOS and Android devices. This also includes the mobile optimization of websites, making them responsive on all devices.
    </div>
  </div>
  <div class="load">
    <div class="mobile_title">Mobile Development</div>
    <img src="//placehold.it/160x120" class="mobile">
    <div class="text_under">The creation of applications for iOS and Android devices. This also includes the mobile optimization of websites, making them responsive on all devices.
    </div>
  </div>
  <div class="load">
    <div class="mobile_title">Mobile Development</div>
    <img src="//placehold.it/160x120" class="mobile">
    <div class="text_under">The creation of applications for iOS and Android devices. This also includes the mobile optimization of websites, making them responsive on all devices.
    </div>
  </div>
  <div class="load">
    <div class="mobile_title">Mobile Development</div>
    <img src="//placehold.it/160x120" class="mobile">
    <div class="text_under">The creation of applications for iOS and Android devices. This also includes the mobile optimization of websites, making them responsive on all devices.
    </div>
  </div>
</div>

Answer 2

将图像放在新行中，每个图像都在分隔列中，也可以对描述文本执行此操作。中心图像使用：

td img{
    display: block;
    margin-left: auto;
    margin-right: auto;

}

对于居中文字添加：

text-align: center;

在.load类中。

这是你的JSFiddle：https://jsfiddle.net/9c1p3fm6/

编辑：是的，您需要删除附加到img元素的所有类。

如何将单独表格HTML的所有元素集中在一起

2 个答案: