Tell me how to center it so that the photo was?

enter image description here enter image description here

.zaslugi_icons { width: 140px; float: left; padding-top: 48px; padding-left: 39px; padding-right: 18px; } .zaslugi_icons p { font-family: 'Open Sans', sans-serif; font-weight: 300; color: #000; } .zaslugi_icons span { display: block; } 
 <div class="zaslugi_icons"> <img src="img/icons_1.png" alt=""> <p>Реализованных <span>проектов</span></p> </div> <div class="zaslugi_icons"> <img src="img/icons_2.png" alt=""> <p>Положительных <span>отзыва</span></p> </div> <div class="zaslugi_icons"> <img src="img/icons_3.png" alt=""> <p>Лет <span>опыта</span></p> </div>

  • The author of the question, if someone’s answer helped you, do not forget to mark it with a decision =) - Arthur

2 answers 2

Without pseudo elements

 * { margin: 0; padding: 0; } .unit { background: #fff; width: 150px; height: 150px; border: 1px solid red; position: relative; transform: rotate(45deg); overflow: hidden; margin: 0 40px; } .border { position: absolute; top: 15px; left: 15px; width: 120px; height: 120px; border: 1px solid blue; } .wrapper { display: flex; margin: 10px; } .over { width: 100px; height: 100px; transform: rotate(-45deg); position: absolute; top: 25px; left: 25px; text-align: center; line-height: 100px; border-radius: 50%; } .unites { height: 200px; padding: 30px; position: relative; } .unites .vois { color: red; position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; font-size: 1.2em; } 
 <div class="wrapper"> <div class="unites"> <div class="unit"> <div class="border"></div> <div class="over"> <p>75</p> </div> </div> <p class="vois">Наши отзывы</p> </div> <div class="unites"> <div class="unit"> <div class="border"></div> <div class="over"> <p>115</p> </div> </div> <p class="vois">Выполненые работы</p> </div> <div class="unites"> <div class="unit"> <div class="border"></div> <div class="over"> <p>180</p> </div> </div> <p class="vois">Количество благодарных клентов</p> </div> </div> <div class="wrapper"> <div class="unites"> <div class="unit"> <div class="border"></div> <div class="over"> <p>75</p> </div> </div> <p class="vois">Наши отзывы</p> </div> <div class="unites"> <div class="unit"> <div class="border"></div> <div class="over"> <p>115</p> </div> </div> <p class="vois">Выполненые работы</p> </div> <div class="unites"> <div class="unit"> <div class="border"></div> <div class="over"> <p>180</p> </div> </div> <p class="vois">Количество благодарных клентов</p> </div> </div>

    The easiest option with pseudo-elements:

     body { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; counter-reset: div; } div { position: relative; text-transform: capitalize; font-size: 25px; text-align: center; } div::before { content: ''; display: block; width: 5rem; height: 5rem; margin: 1rem; border: 2px solid gray; box-shadow: inset 0 0 0 4px white, inset 0 0 0 5px gray; transform: rotate(45deg); } div::after { counter-increment: div; content: counter(div); position: absolute; bottom: 50%; left: 50%; transform: translateX(-50%); } 
     <div>lorem</div> <div>ipsum</div> <div>dolor</div>

    • a plus sign from me, a convenient example, but with pseudo elements you beat me, I had to redo it - user33274
    • @ MaksimLensky, yes, and you do not need to prescribe a lot of everything - Arthur
    • yes, but dynamically everything is difficult to do when with pseudo elements - user33274