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

Question

我在 div 中有 2 列，每列包含 3 个 div。由于这是针对移动站点的，因此我希望它们能够响应地居中对齐。当为标准移动设备（320 像素、375 像素）调整大小时，它们对齐得很好，如下所示：http://imgur.com/a/WDwSL, but when resized at tablet size, they don't center align at all. http://imgur.com/a/mMTRG

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

.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

进行一些更改

Answer 2

.wrapper{
  width: 1170px;
  max-width: 90%;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}
.column{
  width: 48%;
  display: inline-block;
  margin: 0 .5%;
}
.item{
  width: 100%;
  background-color: blue;
  color: white;
  margin-bottom: 20px;
  display: inline-block;
}

<div class="wrapper">
  <h2>2 column center divs</h2>
  <div class="column">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  <div class="column">
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</div>

会亲自改变你的方法

Answer 3

有很多方法可以做到这一点，但最有效和最简单的方法是使用 CSS3 Flexbox。旨在解决这类布局问题。

代码也显着减少。你只需要给外.two-circles和内.circles-left, .circles-right一个属性display: flex。最重要的是 justify-content: center 到内圈以使其与中心对齐。如下所示：

.two-circles {
  width:100%;
  display: flex;
  flex-wrap: wrap;
}

.circles-left, .circles-right {
  width:48%;
  display: flex;
  justify-content: center;
  padding-bottom: 13%;
}

就是这样！ .clear 中的其余代码与您需要的相同。

Fiddle updated here

Answer 4

使用 FLex 将使这更容易。见下文。

body {
  background: #ccc;
  }
.two-circles {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.circles-left, .circles-right {
  width: 37%;
  text-align: center;
}

.circles-right {
  padding-bottom: 13%;
}

.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;
  display: inline-block;

}

<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> Remove-->
</div>

Answer 5

.heading{
  margin: 40px 0px;
}
.heading h1{
  text-align: center;
}
.block{
  width: 100%;
  text-align: center;
  display: inline-flex;
}
.block_left, .block_right{
  width: 50%;
}
.sub_block{
  background: transparent;
    border: 1px solid #ccc;
    padding: 25px 30px;
    border-radius: 50%;
}
.block_head{
  margin: 40px 0px;
  font-weight: bold;
}

<div class="heading">
<h1 class="">
RATE YOUR ANXIETY
</h1>
</div>

<div  class="block">

<div class="block_left">
<span class="sub_block">
1
</span>
<div class="block_head">
Nervous
</div>
</div>

<div class="block_right">
<span class="sub_block">
2
</span>
<div class="block_head">
Uneasy
</div>
</div>
</div>

<!-- Third block row -->
<div  class="block">

<div class="block_left">
<span class="sub_block">
5
</span>
<div class="block_head">
Fearful
</div>
</div>

<div class="block_right">
<span class="sub_block">
6
</span>
<div class="block_head">
Panicked
</div>
</div>
</div>

<!-- second block row -->
<div  class="block">

<div class="block_left">
<span class="sub_block">
3
</span>
<div class="block_head">
Anxious
</div>
</div>

<div class="block_right">
<span class="sub_block">
4
</span>
<div class="block_head">
Worried
</div>
</div>
</div>

Answer 6

既然你提到了网格，你是否尝试过display:inline-blocks的概念？

CSS

.circles {
    width:48%;
    margin:1%; //not really required
    display: inline-block;
}

.circle-wrapper {
    text-align: center;
}

HTML

<div class="circle-wrapper">
    <div class="circle">
        <!-- content here -->
    </div>
</div>

display:inline-block 的作用是将 space 包装成与其内容一样多的内容（当然，除非您定义宽度和高度）因此，您可以按照自己的方式放置元素。

我在圆圈中所做的是我将圆圈的宽度定义为整个屏幕的 48%。因此里面的内容接收到那么多的space。（我可以选择 50，但这样就不会有 space 用于边距和其他内容）。

包装器 class 将这些内联块对齐到中心，就像文本块一样。 :) 毕竟。文本可以被视为行内块

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

2 column divs with divs inside center aligned responsively

html

css

responsive

CSS

HTML