Вопросы Теги

Как выровнять объекты DOM с помощью CSS?

Как выровнять текст, отмеченный на изображении на той же высоте.

introducir la descripción de la imagen aquí

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%;
}

2
задан 26.11.2019, 18:16
2 ответа

код, который я функционировал, - следующий:

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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <li style="list-style:none;"><a href="/Home/Index" id="inicio" class="listBanner">Inicio</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <li style="list-style:none;"><a href="/Home/Contact" id="entrar"  class="listBanner">Entrar</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
    </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%;
}
1
ответ дан 01.12.2019, 10:47

Доказательство герметизируя в корпусе элементы и 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;
}
1
ответ дан 01.12.2019, 10:47