2

Como puedo hacer para alinear a la misma altura el texto que aparece marcado en la imagen.

introducir la descripción de la imagen aquí

código HTML:

  <div id="banner" class="divBanner row container-fluid col-12">
       <img id="logSudoku"  class="logoInitial col-1" />
       <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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <li style="list-style:none;"><a href="/Home/Index" id="inicio" style="color:white;font-size:18px;">Inicio</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <li style="list-style:none;"><a href="/Home/Contact" id="entrar" style="color:white;font-size:18px;">Entrar</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
        </ul>
 </div>

código 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%;
}
1
  • 1
    No deberías usar un label para texto normal, por semántica los label son para asociar un texto con un campo de formulario. Para lo de alinear veo que usas bootstrap, lo mejor sería que pusieras el texto en una columna y el menú en otra.
    – user7176
    Commented el 27 nov. 2019 a las 7:07

4 respuestas 4

1

no me carga la imagen y no puedo ver si quieres alinear algo más que los enlaces del listado pero este se alineará con un simple:

li {display: inline-block}

en caso de que necesites que alinie todo puedes dividir el contenido div banner en columnas ya que utilizadas boostrap 4 de manera que se coloquen como consideres. ejemplo:

<div id="banner" class="divBanner row container-fluid align-items-center">
       <img id="logSudoku" class="logoInitial col-1" />
       <label class="fontInitial col-auto col-md-2"> Sudoku de Todos </label>
        <ul class="col-12 col-md-auto">    
             <li style="list-style:none; display:inline-block"><a href="javascript:void(0)"  id="menuStick" class="abrir-cerrar" onclick="MenuStick()" style="color:white;font-size:18px;"> Menu </a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <li style="list-style:none; display:inline-block"><a href="/Home/Index" id="inicio" style="color:white;font-size:18px;">Inicio</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <li style="list-style:none; display:inline-block"><a href="/Home/Contact" id="entrar" style="color:white;font-size:18px;">Entrar</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
        </ul>
 </div>

quiza no he entendido lo que necesitas hacer, no veo la imagen que adjuntas, pero el código que te facilito a mi me funciona perfectamente. Añado una clase de bootstrap al div para mejorarlo un poco. Me da error al adjuntar un pantallazo en que se ve como carga bien.

2
  • 1
    de esa forma no lo hace Commented el 26 nov. 2019 a las 18:40
  • Her modificado mi respuesta por si quieres ver lo que te comento, pero en realidad es que el código que te decía a mi me funciona y que quizá es que no entiendo bien lo que quieres hacer al no ver la img que adjuntas. Un saludo
    – JorgeGuz
    Commented el 27 nov. 2019 a las 9:59
1

Prueba encapsulando los elementos y añadiendo "display flex" y "align-items 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

el codigo que me funciono es el siguiente:

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>

codigo 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

Si metes la imagen dentro del "ul" te debería de alinearlos.

  <div id="banner" class="divBanner row container-fluid col-12">
    <ul class="row" style="margin-left:30%">
         <li><img id="logSudoku"  class="logoInitial col-1" /><label class="fontInitial col-12"> Sudoku de Todos </label></li> <!--AQUÍ-->
         <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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <li style="list-style:none;"><a href="/Home/Index" id="inicio" style="color:white;font-size:18px;">Inicio</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <li style="list-style:none;"><a href="/Home/Contact" id="entrar" style="color:white;font-size:18px;">Entrar</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
    </ul>

1
  • 1
    de esa forma no lo hace Commented el 26 nov. 2019 a las 18:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.