Question

我有三个div，我想水平对齐，也在页面中心对齐。

我所拥有的是接近我想要的，但它不在页面的中心，也不会在浏览器窗口中调整大小。

我还是HTML和CSS的新手，所以任何建议都会受到赞赏。

#wrapper {
  width: 90%;
  min-width: 768px;
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
}

.projectlogo {
  float: left;
  margin: 20px;
  width: 122px;
  height: 113px;
}

.projectsite {
  border-radius: 50%;
  border: solid #DFF0D8;
  float: left;
  margin: 20px;
  width: 126px;
  height: 126px;
}

.description {
  float: left;
  margin: 20px;
  width: 400px;
}

#gallery {
  width: 980px;
  height: 240px;
  font-size: 1.25em;
}

#gallery h2 {
  text-align: center;
}

<div id="wrapper">
  <main>

    <div id="gallery">
      <h2>My Work</h2>

      <img class="projectlogo" src="images/rotary_logo.png" width="122" height="113" alt="" />
      <div class="description">
        <p>Rotary Club of Wilsonville is an ongoing project. They are an active group in their community and plan many events for variuos causes. They needed help keeping the calendar updated and improving some of the content on their site. </p>
      </div>
      <img class="projectsite" src="images/website2.png" width="126" height="126" alt="" />

    </div>
  </main>
</div>

图片不会出现给你的读者，但我加入了html，让你更好地了解我想要完成的是什么。

我还包含了包装器信息，因为这就是我正在设置页面以使所有内容居中并在左侧和右侧为其提供页面空白区域。

Answer 1

这是一个以一切为中心的解决方案，希望这正是您所需要的。为了实现这一点，我创建了一个div来包裹你的三个div，然后给它display: inline-block以使它缩小以适应。然后我给父母text-align: center排队包装div中心。我还给你的画廊div左边和右边的自动边距，以整个事物为中心。最后，我从第一个p元素中移除了上边距，以便顶部与其他div一起显示。

希望这正是您所寻找的！

工作现场演示（请务必点击“整页”以全屏查看）：

#wrapper {
    width: 90%;
    min-width: 768px;
    max-width: 1280px;
    margin-right: auto;
    margin-left: auto;
}
.projectlogo {
    float: left;
    margin: 20px;
    width: 122px;
    height: 113px;
}
.projectsite {
    border-radius: 50%;
    border: solid #DFF0D8;
    float: left;
    margin: 20px;
    width: 126px;
    height: 126px;
}
.description {
    float: left;
    margin: 20px;
    width: 400px;
}
.description p:first-child {
    margin-top: 0;
}
#gallery {
    width: 980px;
    height: 240px;
    font-size: 1.25em;
    margin: 0 auto;
}
#gallery h2 {
    text-align: center;
}

#wrap {
    display: inline-block;
}

main {
    text-align: center;
}

<div id="wrapper">
    <main>
        <div id="gallery">
             <h2>My Work</h2>

            <div id="wrap">
                <img class="projectlogo" src="images/rotary_logo.png" width="122" height="113" alt="" />
                <div class="description">
                    <p>Rotary Club of Wilsonville is an ongoing project. They are an active group in their community and plan many events for variuos causes. They needed help keeping the calendar updated and improving some of the content on their site.</p>
                </div>
                <img class="projectsite" src="images/website2.png" width="126" height="126" alt="" />
            </div>
        </div>
    </main>
</div>

JSFiddle版本：https://jsfiddle.net/66jhc0Ld/1/

浮动分区并使分区居中

1 个答案: