Текст по краям и изображение по центру

209
17 апреля 2018, 00:57

Как можно сделать так, чтобы текст был по краям, а изображение по центру?

Answer 1

Можно с помощью flex:

* { 
  margin: 0; 
  padding: 0; 
} 
 
.wrapper, 
.text, 
img { 
  margin: 1rem; 
} 
 
.wrapper { 
  display: flex; 
  justify-content: center; 
} 
 
.text { 
  position: relative; 
  flex-basis: 30%; 
} 
 
.text::before { 
  content: "\25BA"; 
  color: crimson; 
  position: absolute; 
  left: -1rem; 
} 
 
@media (max-width: 768px) { 
  .wrapper { 
    flex-direction: column; 
  } 
}
<div class="wrapper"> 
  <div> 
    <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore cumque, odio consequatur, dolores hic a perferendis nemo ab temporibus ex quia aliquam molestiae explicabo? Reiciendis cupiditate perferendis aspernatur quos odio.</div> 
    <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi placeat reiciendis laudantium similique totam quaerat numquam veritatis qui vitae eveniet, voluptates debitis necessitatibus, iusto exercitationem nostrum adipisci cum cumque illum.</div> 
    <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. A rem eveniet molestias maxime odio. Fugit ea tenetur dolores facilis, quos laborum omnis est sint beatae illo distinctio? Natus, maxime aspernatur!</div> 
  </div> 
  <img src="https://via.placeholder.com/200x250" alt="1"> 
  <div> 
    <div class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate, sed distinctio. A voluptate minima repellat voluptatibus maiores! Dolore eveniet laudantium, autem molestiae asperiores laboriosam unde perferendis deserunt, harum temporibus quidem.</div> 
    <div class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur tempora, neque dolores cupiditate facilis error rem totam, repellendus suscipit magnam, porro esse possimus! Quasi cumque eligendi maiores, tempora laudantium et!</div> 
    <div class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat enim quo at ut. Nemo optio eveniet ducimus nesciunt, voluptate necessitatibus voluptas reprehenderit numquam consequatur, animi rem nam odit qui maiores?</div> 
  </div> 
</div>

READ ALSO
Парсинг динамических данных на C#

Парсинг динамических данных на C#

Здравствуйте! У меня появилась задача : парсить данные с этого сайта (Мне нужны количество поставленной валюты на каждую из команд и победитель...

154
Проблема с margin &mdash; неправильный отступ [требует правки]

Проблема с margin — неправильный отступ [требует правки]

http://prntscrcom/j5ithp Из-за того, что в последнем списке нету пятого ли, место соответственно занимается неправильно, а задал отступ всем спискам...

152
Повторяющиеся заголовки (теги title)

Повторяющиеся заголовки (теги title)

Google видит в панели Searc Console повторяющиеся заголовки (title) на моем сайте, но при просмотре указанных страниц через просмотр кода видно, что title у каждой...

96
Замена дефолтных стрелок у slick slider

Замена дефолтных стрелок у slick slider

Каким образом можно заменить стрелки у slick'a? Нашел такой способ:

160