Quiero alinear el texto del menú en la parte inferior de la imagen ¿cómo puedo conseguirlo?

Resultado esperado:

Image    Image    Image    Image
[menutext]    [menutext][menutext]    [menutext]

Real de salida :

Image[menutext]      Image[menutext]      Image[menutext]      Image[menutext]  

mi Código Css:

#vilaniHeader
{
    margin: 0;
    padding: 0;
    height: 80px;
    background-color: Black;
}

#vilaniHeader h1
{
    padding-left: 15%;
    font: Arial;
    font-size: 30px;
    color: #ffffff;
    font-weight: bold;
    float: left;
}
#vilaniHeader #menu
{
    color: #ffffff;
    font: Arial;
    font-size: 18px;
    font-weight: bold;
    padding-top: 30px;
    padding-left: 30%;
}

#vilaniHeader #menu ul
{
    list-style: none;
    margin: 0;
    padding: 0;
    padding-right: 300px;
    padding-bottom: 300px;

}
#vilaniHeader #menu li
{
    display: inline;
    margin: 0 15px 0 15px;
    float: none;
    text-align:center;

}

#vilaniHeader #menu a
{
    text-decoration: none;
    color: #ffffff;
}
#vilaniHeader #menu .menuHome
{
    color: red;
    clear:both;
    padding-top:50px;
    background-image:url:("Styles/menuHome.png") ;
    vertical-align:text-top;
}

y Mi código HTML

<div id="vilaniHeader">
                <h1>
                   Comany name
                </h1>
                <div id="menu">
                 <ul>
                 <li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
                 <li><a href="About.aspx">Car</li>
                 <li><a href="About.aspx">Mobile</li>
                 <li><a href="About.aspx">OldThings</li>
                 <li><a href="About.aspx">Matrimoni</li>
                 </ul>
                </div>
            </div>

Quiero menú de texto se deben alinear en la parte inferior de la imagen plese me ayude a hacer eso.

  • Usted podría haber simplificado el ejemplo de la facilidad para nosotros (especialmente el CSS, demasiado).
InformationsquelleAutor pramod | 2011-06-05

6 Comentarios

  1. 1

    Me encontré con esta solución la construcción de acuerdo con la respuesta aquí de tejash. Mi respuesta valida y es el motor de búsqueda amistoso.

    • Preferí utilizar los enlaces dentro de un div, pero me imagino que esto va a funcionar con un ul
    • Puedo usar una imagen de fondo que no se muestra si la CSS está deshabilitado
    • Yo uso un lapso de tiempo visualizado como bloque porque un div dentro de una etiqueta a no validar
    • Yo uso una clase para colocar la imagen, pero el uso de identificadores de si desea pics diferentes para cada enlace
    • Cambiar el ancho + alturas para adaptarse a sus necesidades

    HTML

    <div id="nav">
        <a href="#"><span class="image"></span><span>About Us</span></a>
        <a href="#"><span class="image"></span><span>Investors</span></a>
    </div>

    CSS

    #nav a {
        display:block; 
        float: left;
        width:100px; 
    }
    .image {
        display:block;
        background: url("myimage.jpg") no-repeat scroll center center transparent;
        height:40px;
        width:100px; 
    }
  2. 0

    Hacer el img un elemento de bloque por lo que toma el ancho completo /saltos de línea después.

    #menu li { display:block; }

    Eso es todo.

    • no me ayuda a conseguir resultado esperado
    • Ejemplo Simple que funciona para mí: <style> img {display:block;} </style> <ul> <li><img src="img.jpg"/>Name</li> <li><img src="img.jpg"/>Name</li> </ul>
    • Si usted todavía tiene problemas, por favor * simplificar el ejemplo, o * pegar su página donde uno puede inspeccionar, como pastehtml.com/view/aw3nujv88.html .
    • Gracias se adhiere… supongo que esto me va a ayudar…
    • he probado la solución anterior, pero el menú se muestran verticalmente quiero mostrarlos horyzontally ¿cómo puedo hacer eso . He puesto li elemento display: inline; aún ahora su muestra verticalmente
    • Usted li { display:inline; } se debería hacer. Usted tendrá que mantener que para ese fin de curso.
    • Pramod, por favor seleccione esta respuesta si se resolvió el problema por lo que la cuestión no se queda como sin respuesta. Si un mod lee esto…selecciona para él por favor.

  3. 0

    Sugiero agregar un envoltorio en el texto y hacer de la imagen y la envoltura de display:block;
    Puede utilizar la etiqueta span como un contenedor de texto.

    HTML

    <ul>
    <li><a><img src="Styles/menuHome.png" /><span>Home</span></a></li>
    </ul>

    CSS

    li img, li span
    {
    display:block;
    }

    • Span es un no-semántico inline bloque, mientras que div es un no-semántico block (colgante). ¿Por qué debe uno usar span y, a continuación, hacer block en lugar de utilizar div de inmediato? No hay ninguna razón para.
    • sí, tienes razón, puede utilizar div directamente. Y por eso dije utilizar un envoltorio en el texto pero span viene primero en la mente. Lo siento por eso
    • El uso de span y configuración de display:block como tejash dice que es mejor aquí, porque sin CSS debe aparecer el texto junto a la imagen. También esta solución no funciona porque no se puede centrar un img cuando display:block.
  4. 0

    Si desea que el texto de superposición de la imagen, pero en la parte inferior, usted debe tratar de jugar con la line-height de la propiedad. Que hará que el texto se mueva hacia abajo, por lo que será en el centro de la línea.

  5. 0

    Tengo dos soluciones para usted. style1 obras para los artículos con texto más pequeño que el de la imagen. style2 obras para los artículos con texto más amplio que el de la imagen. Más fácil es para asegurarse de que las imágenes son siempre mayor o menor que la del texto, por lo que necesita sólo un estilo.

    CSS:

    #menu {
        list-style:none
    }
    #menu li {
        float:left;
        text-align:center
    }
    #menu .style1 img, #menu .style2 span {
        overflow:hidden
    }
    #menu .style1 span, #menu .style2 img {
        display:block
    }

    HTML:

    <div id="vilaniHeader">
        <h1>Comany name</h1>
        <ul id="menu">
            <li class="style1"><img src="Styles/menuHome.png" width="10" alt="" /> <span>Home</span></li>
            <li class="style2"><img src="Styles/menuHome.png" width="100" alt="" /> <span>Car</span></li>
        </ul>
    </div>

    Yo no soy un span-fan, pero me parece que no se puede hacer sin aquí.


    Por CIERTO, ¿por qué no acaba de agregar un br?

    CSS:

    #menu {
        list-style:none
    }
    #menu li {
        float:left;
        text-align:center
    }

    HTML:

    <div id="vilaniHeader">
        <h1>Comany name</h1>
        <ul id="menu">
            <li><img src="Styles/menuHome.png" width="10" alt="" /><br />Home</li>
            <li><img src="Styles/menuHome.png" width="100" alt="" /><br />Car</li>
        </ul>
    </div>

    Supongo que es la manera más sencilla y fiable solución.

  6. 0

    Puede hacer de esta manera, obviamente sustitución de la imagen de ejemplo que he usado. Para el enlace a trabajar, usted puede usar un jQuery evento click en LI, así que busca los enlaces en el interior del clic LI y, a continuación, abre el enlace deseado.

    http://jsfiddle.net/WcePK/

    HTML

    <ul>
        <li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
        <li style="background-image: url('http://jsfiddle.net/img/logo.png')"><a href="About.aspx">Car</a></li>
        <li style="background-image: url('http://jsfiddle.net/img/logo.png')"><a href="About.aspx">Mobile</a></li>
        <li style="background-image: url('http://jsfiddle.net/img/logo.png')"><a href="About.aspx">OldThings</a></li>
        <li style="background-image: url('http://jsfiddle.net/img/logo.png')"><a href="About.aspx">Matrimoni</a></li>
    </ul>

    CSS

    LI {
          float: left;
          margin: 5px;
          padding: 50px 10px 10px;
          min-width: 100px;
          background-repeat: no-repeat;
          background-position: center 10px;
          background-color: #366D93;
          text-align: center;
          cursor: pointer
    }
    • Eso es más complicado y el uso de imágenes de fondo si a menudo no deseado. El fondo es de estilo y puede/podría ser omitido, mientras que un img es el contenido.
    • Yo realmente no veo donde es «más complicada», pero de acuerdo sobre el estilo y el contenido, aunque no está claro si el usuario desea utilizar las imágenes como el contenido o estilo.
    • Para los enlaces usa habitualmente el a elemento, y no jQuery, haga clic en evento… supongo que tus enlaces no funcionan porque no se cierra correctamente. Y si desea que la imagen se puede hacer clic también, poner la a a su alrededor.
    • Lo siento, se me acaba de copiar & pegado a la fuente ejemplo, SIN el cierre A… Gracias! Y si te das cuenta, como he dicho, el vínculo sería aún se conservan en el interior del LI.
    • Además, usted puede fijar que moviendo el padding y min-width de li a a y configuración de a a display:inline-block. De esta manera, el enlace debería llenar el padre li elemento.
    • Agradable, es realmente un mejor enfoque. Gracias por compartirlo! 😉

Dejar respuesta

Please enter your comment!
Please enter your name here