小贝子编程

2列Divs dif内部内部的div响应性地对齐



i在DIV内有2列，每列包含3个Divs。由于这是针对移动站点的，我希望它们在中心响应地对齐。在标准手机(320px，375px(调整大小时，它们会很好地对齐：https：//i.stack.imgur.com/wanrv.jpg，但是当以平板电脑的尺寸调整大小时，它们根本不相处。https://i.stack.imgur.com/6gjr3.jpg

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

.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 

.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

进行一些更改

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

会亲自改变您的方法

有很多方法可以做到这一点，但是最有效，最简单的方法是使用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中的其余代码与您需要相同。

小提琴在此处更新

使用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>

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

自从您提到网格以来，您是否尝试过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，但是没有空间的利润和东西(。

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

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium