text-align:center ne fonctionne pas avec les éléments div
J'ai cherché pendant environ 45 minutes et je ne pouvais pas trouver une solution à mon problème ici. Je veux ma galerie de classe divs (ceux-ci seront créés dynamiquement) pour aligner eux-mêmes, dans le centre de la gallery_container div en utilisant uniquement des règles css. Je suis en apprentissage donc toute explication serait utile!
Merci d'avance!
<head>
<style>
#gallery_container{
text-align: center;
width:100%;
overflow: auto;
background:orange;
}
.gallery{
text-align: left;
border-style: solid;
border-width:3px;
border-top-left-radius: 40px;
border-bottom-right-radius: 40px;
background:yellow;
width:335px;
padding:20px;
float:left;
margin:15px;
}
.gallery h2{
margin-top:0;
}
.gallery img{
height:120px;
width:160px;
float:right;
}
</style>
<body>
<div id ='content_gallery'>
<h2>Gallery</h2>
<div id='gallery_container'>
<div class = gallery>
<img src = 'bowling_01.png'>
<h2>Company bowling</h2>
<h4>Date: June 14, 2013</h4>
<p>The company heads to Boca Bowl for our monthly bowling event!</p>
</div>
<div class = gallery>
<img src = 'bowling_01.png'>
<h2>Company bowling</h2>
<h4>Date: June 14, 2013</h4>
<p>The company heads to Boca Bowl for our monthly bowling event!</p>
</div>
<div class = gallery>
<img src = 'bowling_01.png'>
<h2>Company bowling</h2>
<h4>Date: June 14, 2013</h4>
<p>The company heads to Boca Bowl for our monthly bowling event!</p>
</div>
</div>
</div>
</body>
et ici le violon http://jsfiddle.net/9gwKc/1/
Votre problème est que vous avez marqué l' .galerie de classe css avec
Je vois, j'ai quitté ce code n'partir de quand j'ai été le tester. Lors de sa suppression, je ne vois pas la différence.
<div class = gallery> ne fonctionne, vous devez <div class="galerie">, et la balise img devrait ressembler à ceci <img src="pixs.png" alt="" /> peut-être que cela aide un peu jsfiddle.net/9gwKc/2
Je n'ai pas le même avis, j'ai oublié les guillemets! mais ça marche comme ça dans google chrome (ou autre, je l'aurais pris). Merci pour la réponse! Il n'aide pas à ma question 🙁
display: inline;
. Comment vous attendez-vous à de centre d'aligner les éléments que vous avez dit au navigateur à empiler les unes à côté des autres?Je vois, j'ai quitté ce code n'partir de quand j'ai été le tester. Lors de sa suppression, je ne vois pas la différence.
<div class = gallery> ne fonctionne, vous devez <div class="galerie">, et la balise img devrait ressembler à ceci <img src="pixs.png" alt="" /> peut-être que cela aide un peu jsfiddle.net/9gwKc/2
Je n'ai pas le même avis, j'ai oublié les guillemets! mais ça marche comme ça dans google chrome (ou autre, je l'aurais pris). Merci pour la réponse! Il n'aide pas à ma question 🙁
OriginalL'auteur Doctor Parameter | 2013-06-18
Vous devez vous connecter pour publier un commentaire.
Cela peut être fait avec l'aide d'un
inline-block
d'affichage, lafloat:left
sera toujours envoyer les éléments à leur plus à gauche possible.float: left;
avant d'ajouterdisplay: inline-block;
pourtext-align
à faire ce que vous voulez ici.OriginalL'auteur Doctor Parameter