| |
|
|
| | Подскажите пожалуйста
Есть div контейнер, справа от него надо вставить картинку ровно по центру div!
У меня получается, что картинка оказывается после div(низ), а не на одной горизонтали! | |
| |
|
|
| |
|
|
| |
для: oli
(26.09.2009 в 17:46)
| | | Кто что подскажет? | |
| |
|
|
| |
|
|
| |
для: OLi
(28.09.2009 в 02:04)
| | | Тег <div> по умолчанию - блочный элемент (имеющий style="display: block").
А блочный элемент тем и отличается от линейного элемента (имеющего по умолчанию style="display: inline"), что после блочного элемента всегда следует перенос строки.
Для решения вашей задачи вам следует изменить указанное выше свойство тега <div> - речь идёт об устранении обязательного переноса строки.
Делается это или переопределением стиля display тега <div> на inline (вариант первый), или же введением для тега <div> "правила обтекания" - установка стиля float (вариант второй).
Но в любом случае у вас возникнет проблема с центрированием тега <img> по вертикали.
Решается она так: надо задать следующему за тегом <div> тегу <img> относительное позиционирование и дать ему смещение по координате top (отрицательное или положительное - в зависимости от выбранного варианта устранения переноса строки).
Величина смещения как раз может отрегулировать положение тега <img> так, чтобы он находился по центру тега <div>. Но для этого вам необходимо знать абсолютные размеры обоих тегов по высоте.
Можно не изменять стиль display или float у тега <div>, а задать тегу <img> кроме вертикального ещё и горизонтальное смещение (вариант третий). Но тогда вам надо будет знать ещё и абсолютную ширину тега <div>.
Приблизительно так - все три варианта:
<div style="height: 100px; background-color: red; display: inline">Див</div>
<img style="width: 100px; height: 50px; background-color: aqua; position: relative; top: -25px" alt="Картинка">
<hr>
<div style="height: 100px; background-color: red; float: left">Див</div>
<img style="width: 100px; height: 50px; background-color: aqua; position: relative; top: 25px" alt="Картинка">
<hr style="clear: all">
<div style="width: 125px; height: 100px; background-color: red">Див</div>
<img style="width: 100px; height: 50px; background-color: aqua; position: relative; top: -75px; left: 125px" alt="Картинка">
|
| |
| |
|
|
| |
|
|
| |
для: АЯ
(28.09.2009 в 02:41)
| | | Благодарю вас за потраченное время и ясный ответ, возьму на заметку! | |
| |
|
|
