Проблема с изображениями в html

178

19 февраля 2018, 01:00

Добрый день!

Подскажите, пожалуйста, как можно в html центрировать изображение. Мне нужно сделать три фотографии, слева, справа и по центру. А под ними текст. Если с первыми двумя все получается, то изображение по центру вставать совсем не хочет. Макет, которого нужно добиться прикреплен.

Собственно, вопрос также в тему: как присвоить этим изображениям разные имена, чтобы потом в css редактировать отдельно каждую?

Заранее спасибо!

Answer 1

Коротко: я использовал float: left; для каждой колонки. Колонки три, а это означает, что ширина каждой будет равна ~33.3333%.

Как присвоить имена? - Можете указать каждой id.

* { 
  box-sizing: border-box; 
} 
 
body { 
  margin: 0; 
} 
 
.column { 
  float: left; 
  width: 33.33%; 
  padding: 10px; 
} 
 
.row:after { 
  content: ""; 
  display: table; 
  clear: both; 
} 
 
img { 
  display: block; 
  margin: 0 auto; 
  max-width: 100%; 
} 
 
h1 { 
  text-align: center; 
} 
 
/** Для примера */ 
#one { 
  opacity: 0.2; 
} 
 
#two { 
  opacity: 0.5; 
} 
 
#three { 
  opacity: 0.8; 
}

<h1>Title of ...</h1> 
 
<div class="row"> 
  <div class="column"> 
    <img id="one" src="https://dummyimage.com/250x120/000/fff"> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
  </div> 
  <div class="column"> 
    <h1>Text here bla</h1> 
    <img id="two" src="https://dummyimage.com/250x120/000/fff"> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
  </div> 
  <div class="column"> 
    <img id="three" src="https://dummyimage.com/250x120/000/fff"> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
  </div> 
</div> 
 
<h1>End of ...</h1>

Answer 2

Вот самый современный способ , поддержка 97%

.flex{ 
  display:flex; 
  align-items:center; 
  justify-content:space-around; 
  box-sizing:border-box; 
} 
.item{ 
  padding:10px; 
} 
.item img{ 
  display:block; 
  width:100%; 
  height:100%; 
}

<div class="flex"> 
  <div class="item"> 
    <img src="http://via.placeholder.com/200x200" alt=""> 
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur odit officiis nulla eum  </p> 
  </div> 
  <div class="item"> 
    <img src="http://via.placeholder.com/200x200" alt=""> 
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur odit officiis nulla eum </p> 
  </div> 
  <div class="item"> 
    <img src="http://via.placeholder.com/200x200" alt=""> 
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur odit officiis nulla eum </p> 
  </div> 
</div>

Answer 3

div { 
  display: inline-block; 
}

<div> 
<img src="https://im0-tub-by.yandex.net/i?id=a2e5ef4b39ec7ee1eb73dae5d2fb5ef3&n=13" alt=""> 
<p>asdasdasd</p> 
</div> 
<div> 
<img src="https://im0-tub-by.yandex.net/i?id=a2e5ef4b39ec7ee1eb73dae5d2fb5ef3&n=13" alt=""> 
<p>asdasdasdas</p> 
</div> 
<div> 
<img src="https://im0-tub-by.yandex.net/i?id=a2e5ef4b39ec7ee1eb73dae5d2fb5ef3&n=13" alt=""> 
<p>afsadfdasfsdadf</p> 
</div>