Центрировать текст относительно ромба

169

08 июля 2018, 21:30

Подскажите, как его отцентрировать, чтобы как на фото было?

.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>

Answer 1

Без псевдо элементов

* { 
  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>

Answer 2

Самый простой вариант с псевдо-элементами:

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>

Создание интернет-магазина косметики в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как получить высоту в inline блоке Fancybox

Подскажите пожалуйста, пытаюсь получить высоту определенного блока в модальном окне Fancybox, но постоянно получаю 0, понимаю что нужно сделать...

191

jQuery

Добавление класса is_open

Не получается по клику добавить класс is_open к td:

176

jQuery

Настройки игрового поля “Сапер”

не работает prompt()

256

Сборка мусора в стеке

Подскажите, пожалуйста, есть ли у значащих типов деструкторы, и происходит ли вызов деструктора при удалении объекта из стека?

190