Как выровнять текст, отмеченный на изображении на той же высоте.
HTML-код:
CSS-код
.divBanner {
background-color: green;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: white;
height: 20vh;
margin-top: 0px;
}
.logoInitial {
height: 100px;
width:6vw;
margin-right: 100%;
padding-top: 1%;
margin-left: 18%;
margin-top:0%;
}
код, который я функционировал, - следующий:
HTML:
<div id="banner" class="divBanner container-fluid">
<img id="logSudoku" class="logoInitial"/>
<ul class="row" style="margin-left:16%">
<li style="list-style:none;"><a href="javascript:void(0)" id="sudoku" class="listBanner">Sudoku de Todos</a></li>
<li style="list-style:none;"><a href="/Home/Index" id="inicio" class="listBanner">Inicio</a></li>
<li style="list-style:none;"><a href="/Home/Contact" id="entrar" class="listBanner">Entrar</a></li>  
</ul>
</div>
код css:
.divBanner {
background-color: green;
font-family:'Times New Roman', Times, serif;
font-size:22px;
width:100%;
}
.logoInitial {
height: 14vh;
width:180px;
margin-right: 100%;
padding-top:1%;
margin-left: 19%;
margin-top:0%;
}
Доказательство герметизируя в корпусе элементы и aГ±adiendo "display flex" и "align-статьи center":
<div id="banner" class="divBanner row container-fluid col-12">
<img id="logSudoku" class="logoInitial col-1" />
<div class="fila">
<label class="fontInitial col-12"> Sudoku de Todos </label>
<ul class="row" style="margin-left:30%">
<li style="list-style:none;"><a href="javascript:void(0)" id="menuStick" class="abrir-cerrar" onclick="MenuStick()" style="color:white;font-size:18px;"> Menu </a></li>
<li style="list-style:none;"><a href="/Home/Index" id="inicio" style="color:white;font-size:18px;">Inicio</a></li>
<li style="list-style:none;"><a href="/Home/Contact" id="entrar" style="color:white;font-size:18px;">Entrar</a></li>
</ul>
</div>
</div>
.fila {
display: flex;
align-items: center;
}