Comment garder une image centrée et sensible?

J'ai une image, centrée à la fois horizontalement et verticalement

#logo01{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-146px;  //half of height
    margin-left:-229px;  //half of width
    cursor:pointer;
}

Maintenant j'ai besoin d'un responsive design, donc:

#logo01{
    max-width:45%;
    max-height:45%;
}

Il fonctionne, mais la position est perdue. Comment puis-je garder l'image centrée et sensible en même temps ?

Essayez d'utiliser margin-left: auto;
sur le navigateur de test?
firefox 22
auto marge ne fonctionne pas avec l'alignement vertical ou de positionnement absolu alors, comment est-ce que cela va l'aider?

OriginalL'auteur qadenza | 2013-08-06

9

C'est un sale autour de:

JSFiddle
```
<div class="shadow"><img class="logo" src="http://placehold.it/1000x1000" /></div>
```
```
div.shadow {
    position:absolute;
    max-width:45%;
    max-height:45%;
    top:50%;
    left:50%;
    overflow:visible;
}
img.logo {
    position:relative;
    max-width:100%;
    max-height:100%;
    margin-top:-50%;
    margin-left:-50%;
}
```
L'astuce est d'utiliser div.shadow comme une dimension "titulaire", de sorte que le pourcentage de travail.

Je l'appelle sale à cause de l'ombre div possèdent encore un peu d'espace, ce qui va empêcher la souris de pointage des choses en dessous. Vous pouvez utiliser événement de pointeur de contourner, mais IE sera laissé derrière, et l'image elle-même ne serait pas pointerble.

Passant, il semble résolu. Mais, je me demande dois-je utiliser l'astuce pour une telle tâche simple. De toute façon, merci beaucoup.
Je ne dirais pas que la verticale de l'aligner dans CSS "tout simplement"...

OriginalL'auteur Passerby
3

Essayer avec ci-dessous le css pour le conteneur de l'image.

CSS:
```
width: 100%; text-align: center; margin-top:50%
```
Akki619, le conteneur est body, il est déjà à 100% et text-align:center. margin-top 50% ne pas centrer l'image verticalement.
u peut définir un violon?

OriginalL'auteur Akki619

essayer cette

http://jsfiddle.net/hAH6u/2/

#logo01{
    position:absolute;
    top:50%;
    left:50%;   
    cursor:pointer;
    max-width:45%;
    max-height:45%;
    display:table;
}

Pédés, votre solution fonctionne pour div, mais pas pour img tag.

OriginalL'auteur Falguni Panchal

1

Vous pouvez faire usage de display:table et display:table-cell bien pour y parvenir.

HTML:
```
<div id='logo_container'>
    <h1 id='logo'><img src = 'http://s18.postimg.org/rwpoh1vo9/forbidden.jpg' alt = 'Logo'/></h1>
</div>
```
CSS
```
#logo_container {
    display:table;
    height:100px;
    width:100px;
    margin:0 auto;   
    text-align:center;
    border:1px solid #333;
}

#logo {
    display:table-cell;
    vertical-align:middle;

}
#logo img {
    max-height:80%;
    max-width:80%;
}
```
Ici est le violon: http://jsfiddle.net/Qe2vG/

Vous pouvez voir que l'image est aligné centrale verticale. Dans le cas d'un style, il suffit de changer le height et width valeur de #logo_container

kalpesh, vous dites: dans le cas d'un style, il suffit de changer la hauteur et la largeur de la valeur de #logo_container. Dans ce cas, je préfère changer la taille du logo lui-même. Mais je ne peux pas. Responsive design exclut fixe la largeur et la hauteur. Dans le cas où je me trompe, merci de faire votre violon sensible.
Si vous donner de la hauteur et la largeur en pourcentage pour #logo_container, puis il va aussi travailler. Vous pouvez vérifier ici: jsfiddle.net/Qe2vG/1. Essayez de ré dimensionnement navigateur et vérifier.
kalpesh, j'ai essayé votre nouveau violon et de redimensionner la fenêtre. logo_container n'est pas redimensionné. Il devient coupée. et il n'est pas centrée verticalement après le redimensionnement

OriginalL'auteur Kalpesh Patel

Simple et avec peu de hauteur:

CSS

img {
    max-width: 100%;
    height: auto;
    max-height: 300px;
    display: table;
    margin: 0 auto;
}

http://jsfiddle.net/herbowicz/a5kumqtv/

OriginalL'auteur Greg Herbowicz

Vous devez vous connecter pour publier un commentaire.