如何在图像前添加cicle

Question

我正在尝试在图像前面添加一个圆圈（圆圈将包含一个图标）。我的代码运行正常，但只有大显示; 1,224及以上..但是，平板电脑和手机不是这样的...所以，我的问题是：如何修复我的代码并使其适用于所有设备，而不使用@media。如果@media是唯一的解决方案，那么我会去实现它。

HTML

<div class="row">
            <div class="col-md-3">
                <div class="service-box">
                    <div class="service-circle" >
                        <!--Add icon inside circle -->

                    </div>
                    <div class="service-bg" style="background-color:  black;"> 
                    <!--  Insert img-->
                    </div>

                    <div class="service-text">
                        <h3>
                            ENTER TITLE

                        </h3>
                    </div>
                </div>

            </div>
            <div class="col-md-3">


            </div>
            <div class="col-md-3">


            </div>
            <div class="col-md-3">


            </div>

        </div>

CSS / LESS

.service-box {



    .service-circle{
        width: 120px;
        height: 120px;
        border-radius: 50%;
        display: table-cell;
        vertical-align: middle;
        color: #000;
        line-height: 500px;
        text-align: center;
        background: #fff;
        position: absolute;
        left: 30%;
        margin-top: 65%;
        border: 5px solid #e6ab43;


    }

    .service-bg {
        height: 250px;
        border:1px solid black;
        img{

            height: 100%;
        }

    }

    .service-text {
        text-align: center;
        margin-top: 30%;

    }



}

更新：

这就是我要做的事情：

因此，我正在使用col-sm-3。

Answer 1

如果您在service-circle内移动service-bg元素，则可以使用transform: translate

对齐它

＆＃13;

＆＃13;

.service-box {
background: red;
}
    .service-bg {
        position: relative;               /*  added */
        height: 250px;
        border:1px solid black;
    }
        img{
            height: 100%;
        }

    .service-circle{
        width: 120px;
        height: 120px;
        border-radius: 50%;
        color: #000;
        background: #fff;
        position: absolute;
        left: 50%;                          /*  added  */
        top: 100%;                          /*  added  */
        transform: translate(-50%,-50%);    /*  added  */
        border: 5px solid #e6ab43;
    }

    .service-text {
        text-align: center;
        margin-top: 80px;                   /*  changed */
    }

＆＃13;

<div class="row">
  <div class="col-md-3">
    <div class="service-box">
      <div class="service-bg" style="background-color:  black;">
        <!--  Insert img-->

      <div class="service-circle">
        <!--Add icon inside circle -->

      </div>
    </div>

      <div class="service-text">
        <h3>
          ENTER TITLE

        </h3>
      </div>
    </div>

  </div>
  <div class="col-md-3">


  </div>
  <div class="col-md-3">


  </div>
  <div class="col-md-3">


  </div>

</div>

＆＃13;

＆＃13;

＆＃13;