html - 为什么我的 div 不会在他们的 parent 中居中？

Question

我在一个父 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

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

解决方案:给文章 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>