Невозможно получить img внутри div "head-logo" для центрирования по вертикали и по горизонтали.
Я попробовал CSS решения, такие как:
1)
.head-logo img {
margin-left: auto;
margin-right: auto;
display: block;
}
2)
.head-logo img {
vertical-align: middle;
}
3)
.head-logo img {
display: -webkit-flex;
display: -ms-flex;
display: flex;
justify-content: center;
-ms-align-items: center;
align-items: center;
}
etc
<div class="head-container">
<div class="head-logo">
<img src="img\logo.svg" height="70" width="70">
</div>
<div class="head-menu">
</div>
</div>
div {
border: dotted 1px;
}
.head-container {
width: 80%;
height: 100px;
margin: auto;
padding: 5px;
background-color: aqua;
}
.head-logo {
vertical-align: middle;
width: auto;
height: 100px;
background-color: red;
float: left;
}
.head-logo img {
}
Текущий результат: img прикреплен к верхнему левому углу родительского div, и мне нужно, чтобы он был отцентрирован со всех сторон.
Возможно, ячто-то упустил, совершенно новый для css, с нетерпением жду вашей помощи.
div {
border: dotted 1px;
}
.head-container {
width: 80%;
height: 100px;
margin: auto;
padding: 5px;
background-color: aqua;
}
.head-logo {
vertical-align: middle;
width: auto;
height: 100px;
background-color: red;
float: left;
}
.head-logo img {
}
<div class="head-container">
<div class="head-logo">
<img src="https://via.placeholder.com/150x200/O%20https://placeholder.com/" height="70" width="70">
</div>
<div class="head-menu">
</div>
</div>