Estoy de carga de la imagen en el dispositivo iOS. Quiero que mi imagen esté centrada horizontalmente y verticalmente en el centro con todas las pantallas y la orientación . Lo he probado con la tabla y td , es alinear horizontalmente centro, pero no en la alineación vertical medio . Esto es lo que he intentado
html:

<table width=100% height=100%> 
    <tr>
        <td style="text-align: center; vertical-align: middle;">
            <img src="" />
        </td>
    </tr>
</table>

css:

html, body
{
    height: 100%;
}
tal vez este enlace puede ayudarle a

OriginalEl autor V-Xtreme | 2014-01-02

5 Comentarios

  1. 24

    Lugar de la Tabla, Se puede lograr lo mismo con div y img

    Demo

    HTML

    <div><img src="http://placehold.it/350x150"></div>

    CSS

    html, body
    {
        height: 100%;
        margin:0;
        padding:0;
    }
    
    div {
        position:relative;
        height: 100%;
        width:100%;
    }
    
    div img {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }
    Bueno. No utilice tablas si se pueden evitar. Pero también recomiendo el uso de clases para este lugar de hacer que los divs y las imágenes en divs se comportan de la misma manera.
    Funciona, pero el position: absolute; ruinas de mi diseño.

    OriginalEl autor Surjith S M

  2. 1

    Intentar imagen de fondo con background-position:50% 50%

    http://jsfiddle.net/Zword/Ve6yz/3/

    html, body
    {
    height: 100%;
    width:100%;
    margin:0;
    padding:0;
    background:url(http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png);
    background-position:50% 50%;
    background-repeat:no-repeat;
    }

    OriginalEl autor Zword

  3. 1

    Probar este | DEMO

    <table> 
        <tr>
            <td class="height" style="text-align: center; vertical-align: middle;">
                <img src="http://" width=100 height=100 />
            </td>
        </tr>
    </table>

    CSS

    html, body
    {
        height: 100%;
    }
    table{
        height:100%;
    }
    td.height{
        height:100%;
    }

    OriginalEl autor Shadow

  4. 1

    Hay una manera simple y fácil :

    .centered {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    OriginalEl autor Arash Hatami

  5. 0

    esto parece de trabajo

    css

    html, body
    {
        height: 100%;
        width:100%;
        margin:0;
        padding:0;
    }

    HTML

    <table width=100% height=100% border="1"> 
        <tr>
            <td style="text-align: center; vertical-align: middle;">
                <img src="http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" />
            </td>
        </tr>
    </table>

    Si usted se está preguntando lo que he cambiado, entonces déjame decirte aun me estoy preguntando la misma 🙂

    pero creo que, toma cuerpo y html la etiqueta más general ayuda…

    esto hace que sea horizontalmente centro , quiero que sea verticalmente el centro de toda la pantalla.
    está centrada verticalmente demasiado…ver aquí => jsfiddle.net/Ve6yz/1

    OriginalEl autor

Dejar respuesta

Please enter your comment!
Please enter your name here