CSS：round_div不响应其父div

Question

我有。

当我调整窗口大小时，它看起来像

没有回应。

.discussion_round_div {
  width: 70px;
  height: 70px;
  border-radius: 100px;
  border: thin #edf1f2 solid;
  position: absolute;
  background: #FFFFFF;
  left: 36%;
  top: 20px;
}

.discussion_round_div_icon{
  position: relative;
  top: 18%;
  font-size: 20px;
  height: 25px;
  color:#adadad;
}

.discussion_icon_text{
  text-align: center;
  font-size: 10px;
  color: #3d4354;
}

.padding_30{
  padding:30px !important;
  
  }

.bg-dark{
  background:#000;
  }


.discussion_small_round_div {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  position: relative;
  background: #2d3446;
  bottom: 9px;
  left: 15px;
  float:right;
}

.discussion_small_round_div:after {
  content: '\2807';
  font-size: 1.5em;
  color:white;
  position: absolute;
  left: 9px;
  top: 1px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="panel discussion_panel_div no_background no_box_shadow" style="position: relative;">
                    <div class="panel-heading padding_30 no_border_radius bg-dark set_padding_0">
                      <div class="discussion_small_round_div pull-right cursor_pointer" id="pending"></div>
                        
                    </div>

                   
                    <div class="discussion_round_div">
                        <div class="text-center discussion_round_div_icon">
                            <span class="glyphicon glyphicon-check "></span>
                            <p class="discussion_icon_text">Approved</p>
                        </div>
                    </div>
                </div>

PS：圆形div应该根据图像位于面板div的中心

我可以不使用媒体查询吗？

任何帮助都会很棒。

谢谢。

Answer 1

只要你定义宽度就很容易：

.discussion_round_div {
  width: 70px;
  height: 70px;
  border-radius: 100px;
  border: thin #edf1f2 solid;
  position: absolute;
  background: #FFFFFF;
  left: 50%; /*changed*/
  top: 20px;
  margin-left: -35px; /* added */
}

Answer 2

.discussion_round_div {
  width: 70px;
  height: 70px;
  border-radius: 100px;
  border: thin #edf1f2 solid;
  /*position: absolute;*/
  position:relative;
  margin:auto ;
  margin-top:-62px;
  background: #FFFFFF;
  /*left: 36%;*/
  top: 20px;
}

.discussion_round_div_icon{
  position: relative;
  top: 18%;
  font-size: 20px;
  height: 25px;
  color:#adadad;
}

.discussion_icon_text{
  text-align: center;
  font-size: 10px;
  color: #3d4354;
}

.padding_30{
  padding:30px !important;
  
  }

.bg-dark{
  background:#000;
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="panel discussion_panel_div no_background no_box_shadow" style="position: relative;">
                    <div class="panel-heading padding_30 no_border_radius bg-dark set_padding_0">
                        
                    </div>

                   
                    <div class="discussion_round_div">
                        <div class="text-center discussion_round_div_icon">
                            <span class="glyphicon glyphicon-check "></span>
                            <p class="discussion_icon_text">Approved</p>
                        </div>
                    </div>
                </div>

Answer 3

你可以试着把：

.discussion_round_div {
  width: 70px;
  height: 70px;
  border-radius: 100px;
  border: thin #edf1f2 solid;
  position: absolute;
  background: #FFFFFF;
  left: 50%;
margin-left: -35px;
  top: 20px;
}

告诉我们。 PD：未对此cs版本进行测试

Answer 4

将您的CSS更改为此。

.discussion_round_div {
    width: 70px;
    height: 70px;
    border-radius: 100px;
    border: thin #edf1f2 solid;
    position: absolute;
    background: #FFFFFF;
    left: 0;
    top: 20px;
    right: 0;
    margin: auto;
}

这将保持圆形div始终居中。希望这会对你有所帮助。

Answer 5

使用绝对定位元素居中的好方法是使用：

left: 50%;
transform: translateX(-50%);

这是the classic trick的更好版本，使用负边距，因为您不需要知道中心元素的宽度，以使此解决方案有效。

所以，只需添加：

.discussion_round_div {
    width: 70px;
    height: 70px;
    border-radius: 100px;
    border: thin #edf1f2 solid;
    position: absolute;
    background: #FFFFFF;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
}

这是JSFiddle。我认为完全集中......

Answer 6

如果您希望白色已批准元素位于中心，即使您调整浏览器大小，也可以使用以下内容：

.class{
    position:absolute;
    left:50%;
    margin-left: -100px;   // if your white approved element width is 200px then set margin to -100
}

祝你好运