0

.position img {
  display: block;
  margin: 0 auto;
}

.content-right {}

.content-left {}
<div class="about">

  <img class="position" src="img/about1.jpg" alt="О нас">
  <p class="content-left">
    July 2010 Our Humble Beginnings
  </p>


  <img class="position" src="img/about2.jpg" alt="О нас">
  <p class="content-right">
    January 2011 Facing Startup Battles
  </p>


  <img class="position" src="img/about3.jpg" alt="О нас">
  <p class="content-left">
    December 2012 Enter The Dark Days
  </p>


  <img class="position" src="img/about4.jpg" alt="О нас">
  <p class="content-right">
    february 2014 Our Triumph
  </p>

</div>

Хочу сделать так чтобы напротив картинки был текст с лева и справа.

1.Текст слева - Статичная картинка по центру 2.Статичная картинка по центру - Текст справа 3.Текст слева - Статичная картинка по центру 4.Статичная картинка по центру - Текст справа

Примерно так должно это выглядеть

Скриншот из PSD

4
  • А что именно не получается?
    – Air
    11 фев 2018 в 10:36
  • Залейте код полностью.
    – Egor
    11 фев 2018 в 10:37
  • нажми править под вопросом и потом значок < >, далее все интуитивно....
    – Air
    11 фев 2018 в 10:46
  • Обновил, добавил код 11 фев 2018 в 11:12

1 ответ 1

1

Собственно как бабуля Ванга - только догадываюсь пример смотреть на полном экране

*,h3,p{
  margin:0;
  padding:0;
}
.item{
  display:flex;
  justify-content:center;
  align-items:center;
}
.items{
  margin:0 20px;
}
h3{
  text-transform:uppercase;
}
img{
  border-radius:50%;
}
.parent{
  width:70%;
  margin:auto;
}

.a{
  transform:translate(110px,0);
}

.b{
  transform:translate(-110px,0);
}
<div class="parent">
<div class="item a">
  <div class="items">
    <img src="http://via.placeholder.com/150x150" alt="">
  </div>
  <div class="items">
    <h3>placehold.it</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>

<div class="item b">
  <div class="items">
    <h3>placehold.it</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="items">
    <img src="http://via.placeholder.com/150x150" alt="">
  </div>
</div>

<div class="item a">
  <div class="items">
    <img src="http://via.placeholder.com/150x150" alt="">
  </div>
  <div class="items">
    <h3>placehold.it</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>


<div class="item b">
  <div class="items">
    <h3>placehold.it</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="items">
    <img src="http://via.placeholder.com/150x150" alt="">
  </div>
</div>

</div>

2
  • Спасибо за помощь меня как раз интересовало размещение текста по центу относительно картинки. 11 фев 2018 в 11:43
  • у меня в лендах это очень часто заказывают .. и потому заготовка была готовая ... потому и вывалил результат быстро ...
    – user33274
    11 фев 2018 в 11:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.