Выравнивание текста над и под изображением

Question

Я пытаюсь выровнять текст выше и ниже изображения.При этом изображения будут аккуратно подобраны так, чтобы текст обнимал верхнюю часть изображения, но текст под изображением имеет большое пространство.

Я бы хотел, чтобы это снова обняло нижнюю часть изображения.

Я пробовал различные решения здесь, но безрезультатно.

Снимок экрана

Вот чтоВ настоящее время у меня есть.

div.igallery {
margin: 2px;
float: left;
width: 60px;
}

div.igallery img {
display: block;
margin: 0 auto;
}

div.idesc {
font-size:10px;
padding: 2px;
text-align: center;
}

Тогда HTML

<div class="igallery">
<div class="idesc">Category F2</div>
<img title="Category F2 :: 8 Metres" src="/img/icons/safety.jpg" alt="Category 
 F2 :: 8 Metres" width="48" height="48" border="0" /><div class="idesc">8 Metres</div>

</div>
<div class="igallery">
<div class="idesc">Shots</div>
<img title="Shots :: 25" border="0" alt="Shots :: 25" src="/img/icons/shots.jpg" width="48" height="48" />
<div class="idesc">25</div>

</div>
<div class="igallery">
 <div class="idesc">Duration</div><img title="Duration :: 30s" src="/img/icons/clock.jpg" alt="Duration :: 30s" width="48" height="48" border="0" />
<div class="idesc">0:30s</div>

Ваш опыт ценится!

Answer 1

Я внес изменения, но безрезультатно.

Я посмотрел на выводимый код. Кажется, что тег p вставляется для тега img, и это выводит поле размером 60 x 48, создавая зазор в нижней части изображения.

Вы можете увидеть это здесь.

http://www.fireworksfireworksfireworks.co.uk/product/happy-trolls/

Не уверен, что использовать, хотя, чтобы избавиться от него.

Answer 2

Мой предыдущий ответ никогда бы не сработал ... Я изменил CSS следующим образом:

.idesc:last-child { 
  padding-top: 0 !important;
  margin-top: 0 !important;
}

Также обратите внимание, что вам нужно закрыть последний div igallery в концеВаш фрагмент кода HTML, добавив </div>, хотя я очень признателен, если это была просто ошибка при копировании / вставке.

После обнаружения, что вы работаете с темой WordPress, приведенный выше код может или можетне работать на желаемый аффект.Однако для дальнейшей проверки этой проблемы вам нужно углубиться в Инструменты разработчика, более подробную информацию о Chrome здесь .Это лучший способ найти любой CSS, конфликтующий с вашим макетом.После этого вы можете противодействовать правилам.Хотя, возможно, вам понадобятся два утверждения, приведенные выше: padding-top и margin-top.

Answer 3

Это то, что у меня сейчас есть, но, похоже, это не имеет значения.

Я уверен, что это действительно просто, но меня это озадачило.Я просто хочу, чтобы текст под изображением находился на том же расстоянии от дна, что и текст сверху.

div.igallery {
margin: 2px;
float: left;
width: 60px;
}

div.igallery img {
display: block;
  margin: 0 auto;
}

div.igallery > div.idesc:nth-child(2) {
  padding-top: 0 !important;
}

div.idesc {
font-size:10px;
padding: 2px;
text-align: center;
}

Answer 4

Просто добавьте margin-top к своему правилу div.idesc и установите для него любой размер, который вы хотите, чтобы нижний текст был удален от изображения. Вот так:

div.igallery {
margin: 2px;
float: left;
width: 60px;
}

div.igallery img {
display: block;
margin: 0 auto;
}

div.idesc {
font-size:10px;
padding: 2px;
text-align: center;
}

<div class="igallery">
<div class="idesc">Category F2</div>
<img title="Category F2 :: 8 Metres" src="https://pbs.twimg.com/profile_images/469017630796296193/R-bEN4UP.png" alt="Category 
 F2 :: 8 Metres" width="48" height="48" border="0" /><div class="idesc">8 Metres</div>

</div>
<div class="igallery">
<div class="idesc">Shots</div>
<img title="Shots :: 25" border="0" alt="Shots :: 25" src="https://pbs.twimg.com/profile_images/469017630796296193/R-bEN4UP.png" width="48" height="48" />
<div class="idesc">25</div>

</div>
<div class="igallery">
 <div class="idesc">Duration</div><img title="Duration :: 30s" src="https://pbs.twimg.com/profile_images/469017630796296193/R-bEN4UP.png" alt="Duration :: 30s" width="48" height="48" border="0" />
<div class="idesc">0:30s</div>