Estoy tratando de centrar una imagen en sentido horizontal con css.

Estoy mostrando mi imagen en la pantalla con el siguiente código HTML:

<div id="loading" class="loading-invisible">  
    <img class="loading" src="logo.png">
</div>

Estoy croping mi imagen como yo sólo quiero mostrar algunos de la imagen y la estoy usando el siguiente css:

img.loading 
{
position:absolute;
clip:rect(0px,681px,75px,180px);
}

sin embargo no puedo trabajar como centro de la imagen una vez que se ha croped.

Cualquier persona capaz de ayudar ?

InformationsquelleAutor Aaron | 2012-08-08

4 Comentarios

  1. 24

    posición absoluta y margen como este

    img.loading{
      position: absolute;
      left: 50%;
      margin-left: -(half ot the image width)px
    }
    • Gracias.. trabajado tratar
  2. 114

    Probar este para tu CSS:

    .center img {        
      display:block;
      margin-left:auto;
      margin-right:auto;
    }

    y, a continuación, añadir a su imagen hacia el centro:

    class="center"
    • Se está Trabajando Para mí. Gracias<img src=»images/logo.png» alt=»logo» class=»img» />
    • Esta solución no funcionará cuando la img se debe establecer con position:absolute;
    • Esto funciona incluso cuando usted tiene varias imágenes.
  3. 6

    Puede utilizar un método diferente:

    Método 1:

    Es un método simple, el uso de «text-align: center;» para su padre div.

    CSS:

    #loading {
      text-align: center;
    }

    HTML:

    <div id="loading" class="loading-invisible">  
        <img class="loading" src="https://dummyimage.com/200x100/000/fff.png&text=Logo">
    </div>

    El VIOLÍN

    Método 2:

    Por favor, compruebe el código:

    CSS:

    #loading img {
      margin: 0 auto;
      display: block;
      float: none; 
      /*width: 200px; if its a large image, it need a width for align center*/
    }

    HTML:

    <div id="loading" class="loading-invisible">  
        <img class="loading" src="https://dummyimage.com/200x100/000/fff.png&text=Logo">
    </div>

    El VIOLÍN

    Método 3:

    El uso de «display: flex;»

    CSS:

    #loading {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    HTML:

    <div id="loading" class="loading-invisible">  
        <img class="loading" src="https://dummyimage.com/200x100/000/fff.png&text=Logo">
    </div>

    El VIOLÍN

    Método 4:

    Puede utilizar «position: absolute;«,

    CSS:

    #loading {
            position: relative;
            }
    #loading img{
            position: absolute;
            top: 0;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, 0%);
            -ms-transform: translate(-50%, 0%);
            -webkit-transform: translate(-50%, 0%);
            -moz-transform: translate(-50%, 0%);
            -o-transform: translate(-50%, 0%);
    }

    HTML:

    <div id="loading" class="loading-invisible">  
        <img class="loading" src="https://dummyimage.com/200x100/000/fff.png&text=Logo">
    </div>

    El VIOLÍN

    Espero que esto le ayudará.

  4. 4

    Uso margin

    margin-left:auto;
    margin-right:auto;
    • Yo creo que usted también querrá un display:block; para una etiqueta img.
    • no parecen trabajar
    • También tendría que darle un ancho para que funcione. También se podría dar el contenedor text-align: center; y que el propio centro de la imagen mientras que no cambie el display a algo más que inline.
    • Sugieren width: auto;

Dejar respuesta

Please enter your comment!
Please enter your name here