中心div在响应式网页中水平固定高度和宽度

时间：2016-01-12 08:25:55

标签： html css css3 responsive-design

我有一堆带有文字的div（aboutMeDescriptionItem中的aboutMeDescriptionItemListList子div），它们需要水平居中。就像在 - 即使我减少浏览器宽度，它们也需要居中。

＆＃13;
＆＃13; 
#secondPageContainer {
  font-family: "San Francisco - Ultra Light";
  font-weight: 100;
  color: rgba(44, 62, 80,1.0);
  display: block;
  position: relative;
  top: 0;
  background-color: rgba(46, 204, 113,1.0);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
  background-repeat: no-repeat;
  background-position: center 0;
  background-size: cover;
  min-height: 100vh; 
}
#aboutMe {
  position: relative;
  top: 10px;
  left: 0;
  right: 0;
  text-align: center;
}
#aboutMeTitle {
  font-size: 5em;
}
#aboutMeSubtitle {
  font-size: 1.5em;
}
#aboutMeDescription {
  display: block;
  position: relative;
  top: 50px;
}
#aboutMeDescriptionBasic {
  position: relative;
  margin: 25px;
  padding: 25px;
  border-radius: 5px;
  background-color: rgba(39, 174, 96,1.0);
}
#aboutMeDescriptionBasic h3 {
  font-size: 2em;
}
#aboutMeDescriptionItemListWrapper {
  position: relative;
  top: 20px;
  min-height: 250px;
  padding: 25px;
}
#aboutMeDescriptionItemList {
  margin: 0 auto;
  display: inline-block;
}
.aboutMeDescriptionItem {
  text-align: center;
  width: 200px;
  height: 200px;
  display: inline-block;
  position: relative;
  margin: 20px;
  padding: 25px;
  border-radius: 5px;
  background-color: rgba(39, 174, 96,1.0);
}
.aboutMeDescriptionItem h3 {
  font-size: 1.2em;
}
＆＃13; 
<div id="secondPageContainer">
  <div id="aboutMe">
    <h2 id="aboutMeTitle">About Me</h2>
    <h4 id="aboutMeSubtitle">Get to know me better</h4>
  </div>
  <div id="aboutMeDescription">
    <div id="aboutMeDescriptionBasic">
      <h3> Something about me... </h3>
    </div>
    <div id="aboutMeDescriptionItemListWrapper">
      <div id="aboutMeDescriptionItemList">
        <div class="aboutMeDescriptionItem">
          <!--h3>bla bla.</h3-->
        </div>
        <div class="aboutMeDescriptionItem">
          <!--h3>bla bla bla.</h3-->
        </div>
        <div class="aboutMeDescriptionItem">
          <!--h3>Bla bla bla bla bla something really long.</h3--></div>
        <div class="aboutMeDescriptionItem">
          <!--h3>Bla bla bla bla bla something really even longer..</h3-->
        </div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

现在我遇到两个问题：

  1. 留下评论的文字。 aboutMeDescriptionItemList未与aboutMeDescriptionItemWrapper的中心对齐。当窗口调整为较小的大小时，最后一个框（aboutMeDescriptionItem）会按预期移动到下方，但它不会居中，而是向左浮动。

  2. 如果文本未注释，则框的顶行（原点）与文本标题h3对齐。由于h3内容大小不同，因此会在不同的来源呈现框。

    3. 示例：我希望这些框符合＆＃34;而且，这里是HASHTAG团队＆＃34;第（4页）。 http://hashtagposters.strikingly.com/

1 个答案:

答案 0 :(得分：0)

  1. 将text-align: center;放在#aboutMeDescriptionItemList上，使其中的项目居中。现在它有默认的text-align: left;

  2. 浏览器窗口中没有来源，html元素一个接一个地流动，坐在第一个提供足够空间的地方。在overflow: hidden;上使用.aboutMeDescriptionItem可以阻止H3（或其他任何内容）从框内扩展。

    3. 另请注意，将内联块div放在单独的代码行上会触发Google Chrome中的错误，该错误会在等于字符空间的框之间创建空格。为了避免这种情况，您可以在内联块元素的父级上设置font-size: 0;，并将字体大小设置回内联块元素本身所需的字体大小。 Chrome仍然会插入一个等于字符宽度的空格，但在字体大小为0时为0。

    #secondPageContainer {
    font-family: "San Francisco - Ultra Light";
    font-weight: 100;
    color: rgba(44, 62, 80,1.0);

    display: block;

    position: relative;
    top: 0;
    background-color: rgba(46, 204, 113,1.0);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: cover;
    min-height: 100vh; 
}
#aboutMe {
    position: relative;
    top: 10px;
    left: 0;
    right: 0;
    text-align: center;
}
#aboutMeTitle {
    font-size: 5em;
}
#aboutMeSubtitle {
    font-size: 1.5em;
}
#aboutMeDescription {
    display: block;
    position: relative;
    top: 50px;
}
#aboutMeDescriptionBasic {
    position: relative;
    margin: 25px;
    padding: 25px;
    border-radius: 5px;
    background-color: rgba(39, 174, 96,1.0);
}

#aboutMeDescriptionBasic h3 {
    font-size: 2em;
}
#aboutMeDescriptionItemListWrapper {
    position: relative;
    top: 20px;
    min-height: 250px;
    padding: 25px;
}

#aboutMeDescriptionItemList {
    margin: 0 auto;
    display: inline-block;
    text-align: center;
}
.aboutMeDescriptionItem {
    overflow: hidden;
    text-align: center;
    width: 200px;
    height: 200px;
    display: inline-block;
    position: relative;
    margin: 20px;
    padding: 25px;
    border-radius: 5px;
    background-color: rgba(39, 174, 96,1.0);
}
.aboutMeDescriptionItem h3 {
    font-size: 1.2em;
}
    <div id="secondPageContainer">
        <div id="aboutMe">
            <h2 id="aboutMeTitle">About Me</h2>
            <h4 id="aboutMeSubtitle">Get to know me better</h4>
        </div>
    <div id="aboutMeDescription">
        <div id="aboutMeDescriptionBasic">
            <h3> Something about me... </h3>
        </div>
        <div id="aboutMeDescriptionItemListWrapper">
            <div id="aboutMeDescriptionItemList">
                <div class="aboutMeDescriptionItem">
                    <h3>bla bla.</h3> </div>
                <div class="aboutMeDescriptionItem">
                    <h3>bla bla bla.</h3> </div>
                <div class="aboutMeDescriptionItem">
                    <h3>Bla bla bla bla bla something really long.</h3></div>
                <div class="aboutMeDescriptionItem">
                    <h3>Bla bla bla bla bla something really even longer..</h3></div>
            </div>
        </div>
    </div>
</div>

相关问题
最新问题