Вертикальное выравнивание изображения

У меня есть div, содержащий изображение и тэг p (см. ниже). Я хочу выровнять изображение в середине div вертикально в зависимости от того, сколько строк находится в абзаце. Вертикальное выравнивание не работает. Я использую JavaScript прямо сейчас, чтобы выяснить, сколько добавить в margin-top, но скорее использовать CSS. Любые идеи?

<div>
    <img>
    <p>Multi-line</p>
</div>

Ответ 1

Попробуйте установить атрибут line-height элемента p на высоту изображения, например:

div p {
  line-height: 18px;
}

Изменить: Просто понял, что я неправильно понял вопрос и пропустил тот факт, что p будет многострочным. Один из вариантов попробовать удалить элемент img в целом и установить его как background-image для p, а background-position left, center. Что-то вроде:

div p {
  background: transparent url(path/to/img) no-repeat left center;
  padding-left:30px; /* Set based on width of image */
}

Ответ 2

Это чистый CSS, вертикально выравнивает изображение, а также изменяет размер изображения вниз, если он выше (или шире), чем содержащая коробка. Эрго, коробка и изображение могут быть любого размера без нарушения вертикального выравнивания. Кроме того, вы можете добавить левое поле в теги <p>, чтобы они не скрывались от изображения.

CSS

/* Positioning */
.absoluteCenterWrapper {
    position: relative; /* Contains the image in the div */
}
.absoluteCenter { /* Aligns image vertically */
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
}
.absoluteCenterWrapper p { /* Pushes <p> to edge of image */
    margin-left: 101px; /* Width of image */
}
.absoluteCenter { /* Specifies width of image to avoid overlap if image changes */
    width: 101px; /* Width of image */
}

/* Sizing - resizes down to avoid cutting off */
.absoluteCenter {
    max-height: 100%;
    max-width: 100%;
}

/* Making it "pretty" */
.absoluteCenterWrapper { margin: 1em; padding: 0.001em; /* <- Hack to contain margins */ outline: 1px solid red; }
.absoluteCenterWrapper p { margin-top: 1em; margin-bottom: 1em; padding-left: 1em;}

<div class="absoluteCenterWrapper">
 <img class="absoluteCenter" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAAAXCAMAAAAlSHE3AAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAA2/AAANvwELq/fgAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAjFQTFRF/38A/4AB/4AC/4ED/4EE/4IF/4IG/4MH/4MI/4QJ/4QK/4UL/4UM/4YN/4YO/4cP/4cQ/4gR/4gS/4kT/4kU/4oV/4oW/4sX/4sY/4wZ/4wa/40b/40c/44d/44e/48g/5Ai/5Ej/5Ek/5Im/5Mo/5Qp/5Qq/5Ur/5Us/5Yt/5Yu/5cv/5cw/5gy/5kz/5o1/5o2/5s3/5s4/5w6/508/54+/58//59A/6BB/6FD/6FE/6JF/6JG/6NH/6NI/6RJ/6RK/6VL/6VM/6ZN/6ZO/6dP/6dQ/6hR/6lT/6pV/6pW/6xZ/61c/65d/65e/69g/7Bi/7Fj/7Jl/7Jm/7Nn/7No/7Rp/7Rq/7Vr/7Zt/7Zu/7dw/7hy/7p2/7t3/7t4/7x5/717/718/759/75+/79//7+A/8GD/8GE/8KF/8KG/8OH/8OI/8WL/8WM/8aO/8eQ/8iR/8iS/8mT/8mU/8qV/8uX/8uY/8yZ/8ya/82b/82c/86e/9Ch/9Ci/9Gj/9Km/9Oo/9Sp/9Sq/9Ws/9at/9ew/9ix/9mz/9m0/9q1/9u4/9y6/969/96+/9+//9/A/+DB/+LG/+TK/+XM/+bN/+bO/+fP/+jR/+nT/+nU/+rV/+vX/+vY/+za/+3b/+7e/+/f//Dh//Di//Hk//Po//Tp//Tq//Xr//Xs//bu//fv//jx//jy//nz//n0//r1//r2//v3//v4//z5//z6//37//38//79//7+////1DEj+QAAAndJREFUSInt1NlfTHEYx/HPNKYaSkVZRkyqGUq2CUOyDDUqe4U4kX3fyb5FliJOirIMQkWSmpnM9Px1buZMZ/Kai2644Ln6vZ7f9znvi+ecA//rHy+jOw+AdPdkfXuKpwQ2e8aN9nGZnhXasdyTEG4nyDUANohLn54uW6BaEker2KVUO9ZI0t9VJq2tWmqKVGIclSWWcH5hOjDLYYRERzIwo6xivgEwO1LjF+9MCykLty01R1cqfsg3eZmhVyzN0unz7tDyb+6B4avkQ7lkwN6fA93SOBFsssfj719gl1KIvS1fetpPRSgNTqfT6TwmLiiUG/aYlR2qXnnY6yTutiwK5c9/MTBXug9AXQeslotjWOO9BTbxbTUa4+xSCopsx3AgEKFo5YIXPWOBfTJ7WMmSw0BCT0MoXyx57H5fq2Loug7PPpmAC0PTscnd8F4+NgG0Ryh1VqvValXERYy/RVEU5Yy4hxW3LAFo7AjlkwPVPLmyzm/OkfXQdQegSAqxiaIp4+QQwNkoe0mVD6qqqqq6aliplFyAmwPaQEtj3EBZSnC5IpOJCdYC5MtGbLJJU6yyC+BQtO33XdbaYWWVLAdoeqvdnOgrHEqj5eSj18CneoAyWaxXYoPHAC5FUx53poxUpg5eBSz+m9pAgajtcLzt+zmgvjcZuN8/Qa/Q9gowfY6mZHlbCyxZxQ/ide/YhWCN1dHqn6kNmH1yBpaJFAFzgs3zMo7KESKUErmemV3fE/V7yXkuIr4Gk06JPT0o8s4RHuCpuCDeG0gCWPZRxHfQGKlQ5ZPArf06ZWSNn59tHtGKnTMtahxm5Jp+b8bljfrf9L/+bP0CQB36KehprcoAAAAASUVORK5CYII=">
 <p>Paragraph goes here.</p>
 <p>Paragraph goes here.</p>
</div>
<div class="absoluteCenterWrapper">
 <img class="absoluteCenter" src="data:image/png;base64,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">
 <p>Paragraph goes here.</p>
 <p>Paragraph goes here.</p>
 <p>Paragraph goes here.</p>
</div>

Ответ 3

Дайте отображение изображения: block, float: left и vertical-align: middle. Или, дайте ему высоту строки, равную высоте содержащего элемента.

Ответ 4

атрибуты вертикального выравнивания CSS работают только на ячейках ячеек и встроенных элементах. Поскольку тег абзаца по умолчанию указывает элемент блока, он ничего не делает. Чтобы текст был выровнен по мере описания, вам либо нужно разделить ваш div на два контейнера, либо использовать таблицу. Здесь хорошая страница, которая поможет вам понять немного лучше: Понимание вертикального выравнивания

Ответ 5

Это вроде двух столбцов? (изображение влево, текст справа)

Если это так, вы можете наверняка просто вставить каждый элемент в свой собственный div...

<div>
    <div style="width:100; float:left"><img /></div>
    <div style="width:100; float:left"><p>multiline</p></div>
</div>

Подумайте, что сделаете то, что вы после

Ответ 6

Возможно, решение в Jak psát web поможет.

Ответ 7

Добавить

div img {
    float: left;
}