Question

我是bootstrap的新手，我现在很麻烦，现在把一些内容集中在bootstrap中的一列中。我想将那个位于文本上方的圆圈居中，我希望它在所有浏览器大小中保持居中（响应）。我尝试了数百种解决方案，但都没有。请任何人帮忙下面是codepen链接：

http://codepen.io/anon/pen/RaQvVE

和一些代码作为stackoverflow建议（html）：

    <div class="container">

            <div class="row">

            <div class="col-md-4 col-sm-6 col-xs-12"></div>

           <div class="col-md-4 col-sm-6 col-xs-12 logo"> 

        <div class="star">
</div>
<div class="moon center-block">
</div>
<div class="moon2 center-block">
</div>
              </div>

            <div class="col-md-4 col-sm-6 col-xs-12"></div>

                </div>

        </div>


        <div class="container">

            <div class="row">

            <div class="col-md-4 col-sm-6 col-xs-12"></div>

           <div class="col-md-4 col-sm-6 col-xs-12"> 

        <div class="logo-text">UMBRA</div>

                </div>

            <div class="col-md-4 col-sm-6 col-xs-12"></div>

                </div>

        </div>

Answer 1

改为使用此Html：

     <div>

            <div class="row">

           <div class="col-md-12 col-sm-12 col-xs-12"> 

                    <div class="star center-block">
                    </div>
                    <div class="moon center-block">
                    </div>
                    <div class="moon2 center-block">
                    </div>
           </div>

          </div>
 </div>


        <div class="container">

            <div class="row">  

            <div class="col-md-4 col-sm-6 col-xs-12"></div>

           <div class="col-md-4 col-sm-6 col-xs-12"> 

                <div class="logo-text">UMBRA</div>

           </div>

            <div class="col-md-4 col-sm-6 col-xs-12"></div>

          </div>

        </div>

这个css：

    .logo {
    display: table;
    margin: 0 auto;
}

.star {
  position: relative;
  z-index: 2;


  width: 98px;
  height: 98px;
  display: table;
  margin: 0 auto;
  border-radius: 50%;
  background: #000;

}

.moon {
  position: relative;
  width: 100px;
  height: 100px;
  display: table;
  margin: 0 auto;
  border-radius: 50%;
  background: #fff;
  z-index: 2;
  top: -99px;


  /*box-shadow: inset 0 0 50px rgba(150, 150, 150, 0.2); */

}


.moon2 {
  position: relative;
  width: 100px;
  height: 100px;
  display: table;
  margin: 0 auto;
  border-radius: 50%;
  background: #fff;
  z-index: 3;
  top: -199px;

  /*box-shadow: inset 0 0 50px rgba(150, 150, 150, 0.2); */

}
.moon2:before {
    content: "";
    width: 100%;
    height: 100%;
    display: table;
    margin: 0 auto;
    border-radius: 50%;
    position: absolute;
    z-index: 6;
    top: 0;
    left: 0;
    background: -webkit-linear-gradient(45deg, rgba(25,25,25,1)100%,rgba(255,255,255,1)80%);
    background: linear-gradient(45deg, rgba(25,25,25,1)100%,rgba(255,255,255,1)80%);
    background: -moz-linear-gradient(45deg, rgba(25,25,25,1)100%,rgba(255,255,255,1)80%);


}


.logo-text {
  display: table;
    margin:0 auto;
  width: 100%;
  text-align: center;
  font-family: "Bicyclette-Regular";
  font-size: 40px;  
}

.logo-text2 {

  text-align: center;
  width: 100%;
  font-size: 15px;
  font-family: 'Bicyclette-Regular';
  letter-spacing: 1px;
  color: #999;

}

将div内容集中在bootstrap 3.3.6中的列中

1 个答案: