Как выровнять изображение по высоте внутри div?
Вопрос: Как правильно установить vertical-align: middle; для <img>
Не удается выровнять изображение по центру. В интернете есть сведения что для того что бы выровнять по центру элемент необходимо задать стили: для parent{display: table;} для child{display: table-cell; vertical-align:middle} Но для изображения это не работает Подскажите кто знает - как правильно разместить изображение по высоте четко по центру родительского div?
<style>
div#div1{
display: table;
border: 1px solid green;
width: 100%;
height: 300px;
background-color: yellow;
text-align: center;
}
img#img1{
display: table-cell;
height: 100px;
vertical-align: middle;
}
</style>
<div id="div1">
<img id="img1" src="http://politrussia.com/upload/iblock/032/032e40743dba6b8e0ec37a7df1f89889.jpg"/>
</div>
|
<style>
#div1{
border: 1px solid green;
width: 100%;
height: 300px;
background-color: yellow;
text-align: center;
display : flex;
}
#img1{
height: 100px;
margin: auto;
}
</style>
<div id="div1">
<img id="img1" src="http://politrussia.com/upload/iblock/032/032e40743dba6b8e0ec37a7df1f89889.jpg"/>
</div>
|
<style>
div#div1{
border: 1px solid green;
width: 100%;
height: 300px;
background-color: yellow;
position: relative;
}
img#img1{
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
</style>
<div id="div1">
<img id="img1" src="http://politrussia.com/upload/iblock/032/032e40743dba6b8e0ec37a7df1f89889.jpg"/>
</div>
|
Спасибо, работает оба варианта
Но тут наступил на еще одни грабли: если для родительского контейнера задать дополнительно padding-right: 300px; то изображение сдвигается в право на 300px от центра родительского div. Подскажите - как от этого избавиться?
<style>
div#div1{
border: 1px solid green;
width: 100%;
height: 300px;
background-color: yellow;
position: relative;
padding-right: 300px;
}
img#img1{
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
</style>
<div id="div1">
<img id="img1" src="http://politrussia.com/upload/iblock/032/032e40743dba6b8e0ec37a7df1f89889.jpg"/>
</div>
И как добавить кнопку посмотреть над кодом - что бы можно было прямо в теме форума посмотреть как работает код. |
box-sizing: border-box для родителя.
Цитата:
Код:
[JS run] |
Цитата:
А можно изображение подвинуть в лево на эти самые padding: 300px; от центра, что бы изображение было по среди той области родительского div что не является padding и margin. !К предыдущему вопросу: если не указивать box-sizing: border-box для родителя изображение как ни странно сдвигается в право, несмотря на то что задан padding-right: 300px; хотя по логике вроде должно было бы в обратную сторону - в лево. И я хочу добиться что если указано для родителя padding-right: 300px; то изображение должно сдвинуться в лево от центра на 300px; Пример для наглядности
<style>
div#div1{
box-sizing: border-box;
border: 1px solid green;
width: 100%;
height: 300px;
background-color: yellow;
position: absolute;
top: 0; left: 0;
padding-right: 300px;
}
img#img1{
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
div#div2{
position: absolute; top: 0; right: 0; width: 300px; height: 300px; background-color: green;
}
</style>
<div id="div1">
<img id="img1" src="http://politrussia.com/upload/iblock/032/032e40743dba6b8e0ec37a7df1f89889.jpg"/>
</div>
<div id="div2"></div>
|
Оно?
<style>
div#div1{
box-sizing: border-box;
border: 1px solid green;
width: 100%;
height: 300px;
background-color: yellow;
position: absolute;
top: 0; left: 0;
padding-right: 300px;
}
img#img1{
border-right: 300px solid transparent;
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
div#div2{
position: absolute; top: 0; right: 0; width: 300px; height: 300px; background-color: green;
}
</style>
<div id="div1">
<img id="img1" src="http://politrussia.com/upload/iblock/032/032e40743dba6b8e0ec37a7df1f89889.jpg"/>
</div>
<div id="div2"></div>
|
Цитата:
|
| Часовой пояс GMT +3, время: 18:57. |