Question

我正在尝试将同一块上的多个图像放在屏幕中央。我可以使用边距等将它们居中，但在调整屏幕尺寸时它们不会保持居中。这是我的代码：

* {
  margin: 0px;
  padding: 0px;
}
header,
section,
footer,
aside,
nav,
article,
hgroup {
  display: block;
}
body {
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-flex: 1;
}
#container {
  text-align: center;
}
#top_menu li {
  display: inline-block;
  font: 14px Insignia;
  padding-top: 30px;
  padding-left: 10px;
  padding-right: 10px;
}
#image_icon img {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 10px auto;
}
#head p {
  font: bold 20px Insignia;
  letter-spacing: 2px;
}
#main_section {
  position: relative;
}
#img1 {
  border-radius: 10%;
  float: left;
  background: #eaeaed;
  border: 1px solid #9799a7;
  margin-left: auto;
  margin-right: auto;
  padding: 4px;
  max-width: 100%;
}
#img2 {
  border-radius: 10%;
  float: left;
  background: #eaeaed;
  border: 1px solid #9799a7;
  margin-left: auto;
  margin-right: auto;
  padding: 4px;
  max-width: 100%;
}
#img3 {
  float: left;
  border-radius: 10%;
  background: #eaeaed;
  border: 1px solid #9799a7;
  margin-left: auto;
  margin-right: auto;
  padding: 4px;
  max-width: 100%;
}

<div id="container">
  <nav id="top_menu">
    <ul>
      <li>RECENT NEWS</li>
      <li>RESEARCH & DEVELOPMENT</li>
      <li>TIMELINE</li>
      <li>ETHICS</li>
      <li>JOURNALS</li>
    </ul>
  </nav>
  <section id="image_icon">
    <img src="C:\Users\Joss\Pictures\Website\AITheme.jpg" alt="View" style="width:250px;height:250px;" align="middle">
  </section>
  <section id="head">
    <p>Artificial Intelligence</p>
  </section>

  <section id="main_section">
    <article id="article_1">
      <header>
        <img id="img1" src="C:\Users\Joss\Pictures\Website\AIHandPic.jpg" alt="View" style="width:125px;height:125px;" align="middle">
      </header>
    </article>
    <article id="article_2">
      <header>
        <img id="img2" src="C:\Users\Joss\Pictures\Website\InterConnected.jpg" alt="View" style="width:250px;height:250px;" align="middle">
      </header>
    </article>
    <article id="article_3">
      <header>
        <img id="img3" src="C:\Users\Joss\Pictures\Website\AIMenuTheme.jpg" alt="View" style="width:125px;height:125px;" align="middle">
      </header>
    </article>
  </section>
</div>

Answer 1

您可以简单地将图像设置为内联块，然后将文本对齐中心设置在它们周围的任何内容上，如：

.wrap {
    text-align:center;
}
img {
    display:inline-block;
}

http://jsfiddle.net/z8sepybr/

专门适用于您提供的代码：

#main_section {
    text-align:center;
}

#article_1, #article_2, #article_3 {
    display:inline-block;
}

使用float（CSS）将多个图像对齐到中心？

1 个答案: