javascript - CSS : round_div is not responsive to its parent 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 */
}