为什么我的 div 不能在他们的 parent 中居中？

Question

我在 parent div 中有两个 div，我试图在特定媒体查询后切换到 100% 宽度，以便它们占用整个屏幕。由于某种原因，它们不会居中并占据整个宽度。这是什么原因造成的？

/*Non Media Query CSS */
.mainContent {
 width: 100%; 
 text-align: center;
 margin-top: 2%;
 margin-bottom: 2%;
 
}

.meContainer {
 width: 50%;
 float: left;
}

.me {
 width: 35%; 
}

.articleContainer {
 width: 50%; 
 float: right;
    text-align: left;
 padding-top:5%;
 margin:auto;
}

article {
 width:86%; 
 line-height: 115%;
    text-align:justify;
}

.container {
 width: 100%; 
 clear: both;
 text-align: center; 
}

/* The CSS I'm struggling With */



@media only screen and (max-width: 424px) {
.mainContent {
 width: 100%; 
 text-align: center;
 margin-top: 2%;
 margin-bottom: 2%;
 
}

.meContainer {
 width: 100%;
 clear:both;
 text-align: center;
 
}

.articleContainer {
 width: 100%; 
 clear:both;
    text-align: center;
 padding-top:5%;
}
}

<div class="mainContent">
 <div class="meContainer">
     <img src="https://c2.staticflickr.com/6/5834/22284877876_c2a7d1f6e0_c.jpg" alt="Portrait of Brian Funderburke" class="me">
    </div>
    
    <div class="articleContainer">
        <article>
        Hi, I'm Brian Funderburke! I'm a freelance photographer and designer based in Fredericksburg, Virginia. My work has been featured in Photographer's Forum Annual Photography Contest as well as the Popular page on 500px. I've been shooting photography and designing since 2013, and have a Bachelor's in Graphic Design with a minor in photography. When not shooting photography or designing, I enjoy spending time hiking along the Blue Ridge Mountains, reading, and other hobbies.
        </article>
    </div>
</div>

Answer 1

您在 child div 中也给出了浮点数属性，所以您必须给出以下 css 到 child div

@media only screen and (max-width: 424px) {
.meContainer, .articleContainer{
    width: 100%;
    float:none; 
    text-align: center;
    margin-top: 2%;
    margin-bottom: 2%;

}

Answer 2

您甚至可能不需要 'only screen' 部分。我只增加了尺寸 b/c 我的浏览器无法缩小到“424px”。

@media (max-width: 600px)

如果媒体查询确实触发了，那么问题出在媒体查询中的 CSS。对我来说，你的图片居中并且在它自己的行上，'article' 文本也是如此，你只需要将内部 <article> 标签居中。

.articleContainer article {
  margin:0 auto;
}

Answer 3

article 的宽度为 86%。由于您不能将块元素与 text-align 对齐，它仍然向左对齐。

解决方法：给出文章margin:0 auto.

/*Non Media Query CSS */

.mainContent {
  width: 100%;
  text-align: center;
  margin-top: 2%;
  margin-bottom: 2%;
}
.meContainer {
  width: 50%;
  float: left;
}
.me {
  width: 35%;
}
.articleContainer {
  width: 50%;
  float: right;
  text-align: left;
  padding-top: 5%;
  margin: auto;
}
article {
  width: 86%;
  line-height: 115%;
  text-align: justify;
}
.container {
  width: 100%;
  clear: both;
  text-align: center;
}
/* The CSS I'm struggling With */

@media only screen and (max-width: 424px) {
  .mainContent {
    width: 100%;
    text-align: center;
    margin-top: 2%;
    margin-bottom: 2%;
  }
  .meContainer {
    width: 100%;
    clear: both;
    text-align: center;
  }
  .articleContainer {
    width: 100%;
    clear: both;
    text-align: center;
    padding-top: 5%;
  }
  article {
    margin: 0 auto
  }
}

<div class="mainContent">
  <div class="meContainer">
    <img src="https://c2.staticflickr.com/6/5834/22284877876_c2a7d1f6e0_c.jpg" alt="Portrait of Brian Funderburke" class="me">
  </div>

  <div class="articleContainer">
    <article>
      Hi, I'm Brian Funderburke! I'm a freelance photographer and designer based in Fredericksburg, Virginia. My work has been featured in Photographer's Forum Annual Photography Contest as well as the Popular page on 500px. I've been shooting photography and
      designing since 2013, and have a Bachelor's in Graphic Design with a minor in photography. When not shooting photography or designing, I enjoy spending time hiking along the Blue Ridge Mountains, reading, and other hobbies.
    </article>
  </div>
</div>

为什么我的 div 不能在他们的 parent 中居中？

Why won't my divs center within their parent?

html

css

media-queries

responsive-design