2列div与响应中心对齐的div

时间：2017-05-03 09:59:47

标签： html css responsive

我在div中有2列，每列包含3个div。由于这是针对移动网站的，我希望它们能够响应地在中心对齐。对于标准手机（320像素，375像素）进行尺寸调整时，它们会很好地对齐，例如：http://imgur.com/a/WDwSL，但是当按照平板电脑尺寸调整大小时，它们根本不会居中对齐。 http://imgur.com/a/mMTRG

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

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

JSFIDDLE

6 个答案:

答案 0 :(得分：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中进行一些更改

答案 1 :(得分：0)

.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>

会亲自改变你的做法

答案 2 :(得分：0)

有很多方法可以做到，但最有效和最简单的方法是使用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

答案 3 :(得分：0)

使用FLex可以使这更容易。见下文。

＆＃13;
＆＃13; 
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;

}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

.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>

答案 5 :(得分：0)

既然您提到了网格，您是否尝试过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所做的是它包含所需的空间与其所拥有的内容完全一样（除非你定义当然的宽度和高度） 因此，您可以按照自己的方式放置元素。

我在圆圈中所做的是我已经将圆的宽度定义为整个屏幕的48％。因此，内部的内容接收了大量的空间。 （我可以去50，但那里没有利润和空间的空间）。

包装类将这些内联块与文本块对齐到中心。 :) 毕竟。文本可以被视为内联块

相关问题
最新问题