images faisant Centrer horizontalement dans une couche

Je le code suivantimages faisant Centrer horizontalement dans une couche

<html> 
<head> 
<title>Test</title> 
<style type="text/css"> 

<!-- 

body,td,th { 

    color: #FFFFFF; 

} 

body { 

    background-color: #000000; 

} 



#Pictures { 

    position:absolute; 

    width:591px; 

    height:214px; 

    z-index:1; 

    left: 17%; 

    top: 30%; 

    text-align:center; 

} 

#Links { 



    width:600px; 

    height:30px; 

    z-index:2; 

    top: 184px; 

    font-family: "Broadway", Broadway, monospace; 

    font-size: 14px; 

    color: #FFFFFF; 

    text-align: center; 



} 

.links2 { 

    font-family: Broadway; 

    color: #FFFFFF; 

    text-decoration: none; 

} 





a:links2, a:visited { 

    color: #ffffff; 

} 



a:hover, a:active { 

    color: #333333; 

} 

#Main { 

    position:absolute; 

    width:800px; 

    height:600px; 

    z-index:2; 

    left: 15%; 

    top: 10%; 

    right: 15%; 

    border-top-style: none; 

    border-right-style: none; 

    border-bottom-style: none; 

    border-left-style: none; 



} 

#Logo { 

    position:absolute; 

    float: left; 

    width:104px; 

    height:100px; 

    z-index:2; 

} 



</style> 

</head> 



<body> 



<div id="Main"> 

<div id="Pictures"> 

<div> 

<a href="1.html" ><img src="1.gif" alt="x" width="181" height="173" border="0" /></a> 

<a href="1.html" class="links2">1</a> 

</div> 

<div> 

<a href="2.html" class="links2"><img src="2.gif" alt="x" width="181" height="173" border="0" align="top" /></a> 

<a href="2.html" class="links2">2</a> 

</div> 

<div> 

<a href="3.html" class="links2"><img src="3.gif" alt="3" width="181" height="173" border="0" /></a> 

<a href="3.html" class="links2">3</a> 

</div> 

</div> 

</div> 

<div id="Logo"><img src="logo.gif" alt="x" width="104" height="100" border="0"/></div> 

</div> 

</body> 

</html>

qui affiche les couches d'image verticalement.

J'essaie de faire en sorte que les 3 images soient alignées horizontalement avec le texte centré en dessous. Pourquoi sont-ils par défaut à la verticale, et puis-je changer ce comportement?

Source

2008-11-18 Joshxtothe4

Je pense qu'un display: block; sur votre classe links2 devrait mettre les liens sous les images correctement.

De même, pour que les images soient alignées horizontalement, utilisez <span> s au lieu de <div> s dans la div 'Images' et faites-les flotter vers la gauche.

#Pictures span 
{ 
    float: left; 
    margin-right: 5px; 
}

Source

2008-11-18 10:01:48

Il place en effet le texte centré sous les images, mais n'empêche pas les images d'être empilées verticalement. –

Désolé! Edité ma réponse en conséquence. –

Cela semble fonctionner! J'ai remplacé tous les DIV avec:

Vous n'avez pas vraiment besoin de beaucoup de code pour réaliser ce que vous cherchez. Par exemple:

<style> 
body { 
background-color: #000; 
color: #FFF; 
} 
a { 
font-family: "Broadway", Broadway, monospace; 
font-size: 14px; 
color: #FFF; 
} 
#images a { 
width: 24.99%; 
display: block; 
float: left; 
text-align: center; 
} 
</style> 

<div id="images"> 
<a href="1.html" > 
    <img src="1.gif" alt="x" width="181" height="173" border="0" /><br /> 
    One 
</a> 
<a href="2.html" > 
    <img src="2.gif" alt="x" width="181" height="173" border="0" /><br /> 
    Two 
</a> 
<a href="3.html" > 
    <img src="3.gif" alt="x" width="181" height="173" border="0" /><br /> 
    Three 
</a> 
<a href="4.html" > 
    <img src="4.gif" alt="x" width="181" height="173" border="0" /><br /> 
    Four 
</a> 
</div>

L'astuce pour obtenir les éléments à aligner horizontalement plutôt que verticalement pour « flotter » les conteneurs (gauche ou droite). En définissant les liens à afficher: block; vous pouvez les utiliser comme les conteneurs au lieu d'envelopper tout en supplément <div> s. J'ai réglé la largeur à 25% (ou 24,99% pour éviter une erreur d'arrondi dans certains navigateurs) afin qu'ils soient répartis uniformément sur la page, mais vous pourriez vouloir un alignement différent qui est facilement fait en utilisant des marges/rembourrage et/ou une largeur différente sur les conteneurs. Notez également que lorsque vous définissez une couleur de texte sur le corps {}, vous n'avez pas besoin de le spécifier ailleurs, sauf pour les liens. La même chose vaut pour font-family, bien que cela soit également hérité par des liens. Bonne chance pour ton projet!

Source

2008-11-18 10:30:29

Regardez ce code et de le tester: vous pouvez faire la même chose d'une manière plus efficace, sémantique et propre:

Css:

div.imageBox { 
    float: left; 
    margin-right: 10px; 
    } 

div.imageBox p { 
    text-align: center; 
    }

Html:

<div class="imageBox"> 
    <a href="#"> 
    <img src="image1.gif" width="100" height="100" 
    alt="image 1" /></a> 
    <p><a href="#">1</a></p> 
</div> 

<div class="imageBox"> 
    <a href="#"> 
    <img src="image2.gif" width="100" height="100" 
    alt="image 1" /></a> 
    <p><a href="#">2</a></p> 
</div> 

<div class="imageBox"> 
    <a href="#"> 
    <img src="image3.gif" width="100" height="100" 
    alt="image 1" /></a> 
    <p><a href="#">3</a></p> 
</div>

C'est tout ce dont vous avez besoin!

Si vous souhaitez conserver votre code, il n'y a aucune raison d'utiliser l'attribut align dans la balise img. Vous pouvez utiliser la durée au lieu de div, mais dans ce cas est préférable de continuer à utiliser div et leur donner une largeur:

div#Pictures div 

    { 
     float: left; 
     margin-right: 5px; 
    }

Ce code:

a:links2

n'a pas de sens. links2 est une classe faite par vous, pas une pseudo-classe ou un pseudo-élément.

Source

2008-11-18 10:35:02 alexmeia

images faisant Centrer horizontalement dans une couche

Répondre

Questions connexes