html - 2 列 div，中心内的 div 响应对齐

Question

我在一个 div 中有 2 列，每列包含 3 个 div。因为这是针对移动站点的，所以我希望它们能够响应地在中心对齐。当为标准移动设备(320 像素、375 像素)调整大小时，它们对齐得很好，如下所示:http://imgur.com/a/WDwSL ，但是当调整为平板电脑大小时，它们根本不会居中对齐。 http://imgur.com/a/mMTRG

无论手机尺寸如何，我怎样才能让它们保持在中心位置？我尝试了媒体查询和其他响应式网格，但它们没有用。任何帮助，将不胜感激。谢谢!

.two-circles {
  width: 100%;
}

.circles-left {
  width: 37%;
  float: left;
  margin-left: 18%;
  padding: 0;
  display: block;
}

.circles-right {
  width: 37%;
  padding-bottom: 13%;
  float: left;
  display: block;
}

.clear {
  clear: both;
}

.rate-circles {
  border: 3px solid white;
  border-radius: 50%;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  opacity: 1;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 50px;
  line-height: 75px;
  color: #0E3475;
  text-shadow: none;
  -webkit-box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
  box-shadow: none;
  width: 75px;
  height: 75px;
  z-index: 86;
  -webkit-transition: background-color .5s ease-in-out;
  -moz-transition: background-color .5s ease-in-out;
  -o-transition: background-color .5s ease-in-out;
  -ms-transition: background-color .5s ease-in-out;
  transition: background-color .5s ease-in-out;
}

h5.circles {
  font-size: 18px;
  text-align: center;
  margin-top: -25px;
}

h1.rate {
  color: #1E53A8;
  font-weight: bold;
  text-align: center;
}

.two-circles a {
  list-style-type: none;
  text-decoration: none;
}

<div data-role="content" id="cmp-postlist">
  <h1 class="rate"> RATE YOUR ANXIETY</h1>
  <div class="two-circles">
    <div class="circles-left">
      <a href="cmp-grounding.html" rel="external">
        <div class="rate-circles">1
          <h5 class="circles">Nervous</h5>
        </div>
      </a>
    </div>

    <div class="circles-right">
      <a href="cmp-grounding.html" rel="external">
        <div class="rate-circles">2
          <h5 class="circles">Uneasy</h5>
        </div>
      </a>
    </div>

    <div class="circles-left">
      <a href="cmp-grounding.html" rel="external">
        <div class="rate-circles">3
          <h5 class="circles">Anxious</h5>
        </div>
      </a>
    </div>

    <div class="circles-right">
      <a href="cmp-grounding.html" rel="external">
        <div class="rate-circles">4
          <h5 class="circles">Worried</h5>
        </div>
      </a>
    </div>

    <div class="circles-left">
      <a href="cmp-grounding.html" rel="external">
        <div class="rate-circles">5
          <h5 class="circles">Fearful</h5>
        </div>
      </a>
    </div>

    <div class="circles-right">
      <a href="cmp-grounding.html" rel="external">
        <div class="rate-circles">6
          <h5 class="circles">Panicked</h5>
        </div>
      </a>
    </div>
  </div>
  <div class="clear"></div>
</div>

JSFIDDLE

Answer 1

.two-circles {
  width: 100%;
}

.circles-left,.circles-right {
  width: 45%;
  padding-bottom: 13%;
  float: left;
}

.circles-right {
text-align:left;
padding-left: 5%;
}
.circles-left {
text-align:right;
padding-right: 5%;
}

.clear {
  clear: both;
}

.rate-circles {
  border: 3px solid white;
  border-radius: 50%;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  opacity: 1;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 50px;
  line-height: 75px;
  color: #0E3475;
  text-shadow: none;
  -webkit-box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
  box-shadow: none;
  width: 75px;
  height: 75px;
  z-index: 86;
  -webkit-transition: background-color .5s ease-in-out;
  -moz-transition: background-color .5s ease-in-out;
  -o-transition: background-color .5s ease-in-out;
  -ms-transition: background-color .5s ease-in-out;
  transition: background-color .5s ease-in-out;
  display: inline-block;
}

h5.circles {
  font-size: 18px;
  text-align: center;
  margin-top: -25px;
}

h1.rate {
  color: #1E53A8;
  font-weight: bold;
  text-align: center;
}

.two-circles a {
  list-style-type: none;
  text-decoration: none;
}

<div data-role="content" id="cmp-postlist">
   		<h1 class="rate"> RATE YOUR ANXIETY</h1>
   		<div class="two-circles">
   		<div class="circles-left">
			<a href="cmp-grounding.html" rel="external"><div class="rate-circles">1
				<h5 class="circles">Nervous</h5>
				</div></a>
		</div>
		
		<div class="circles-right">
			<a href="cmp-grounding.html" rel="external"><div class="rate-circles">2
				<h5 class="circles">Uneasy</h5>
				</div></a>
		</div>
		
		<div class="circles-left">
			<a href="cmp-grounding.html" rel="external"><div class="rate-circles">3
				<h5 class="circles">Anxious</h5>
				</div></a>
		</div>
		
		<div class="circles-right">
			<a href="cmp-grounding.html" rel="external"><div class="rate-circles">4
				<h5 class="circles">Worried</h5>
				</div></a>
		</div>
		
		<div class="circles-left">
			<a href="cmp-grounding.html" rel="external"><div class="rate-circles">5
				<h5 class="circles">Fearful</h5>
				</div></a>
		</div>
		
		<div class="circles-right">
			<a href="cmp-grounding.html" rel="external"><div class="rate-circles">6
				<h5 class="circles">Panicked</h5>
				</div></a>
		</div>
			</div>
			<div class="clear"></div>
			</div>

使用这个 CSS。我没有对 HTML 进行任何更改。我的建议是您需要对 HTML 和 CSS 进行一些更改