J'ai un problème à créer un en-tête décent dans CSS. Ce que je veux, c'est un Ceci est mon exemple de code: et mon CSS: Le problème est que lorsque je montre un J'ai fait un exemple sur jsfiddle ici: http://jsfiddle.net/8b9zf/ en-tête qui aligne son contenu au centre de son parent
. Parfois, bien que ce soit un logo supplémentaire affiché comme un
qui doit être aligné sur la
, mon
est pas centré. Si je supprimais ce
c'est ... Comment puis-je résoudre ce problème ??
1 commentaires
3 Réponses :
Si vous rendez l'image absolument positionnée à 0,0 au lieu de le flotter, il ne poussera pas le H1 hors de l'algissement du centre. Mais vous exécutez ensuite le danger de l'image qui chevauche le texte si l'image est trop large, ou le conteneur de la position trop petite. Pour contrer cela, vous voulez probablement ajouter du rembourrage à gauche / droite du conteneur
Oui, j'ai également pensé à cela aussi, mais si la hauteur de l'image augmente, il pousse de mon en-tête et couvre le contenu ci-dessous: JSFIDDLE.net/8B9ZF/21
Vous faites comme ça:
div.logo img {
width: 200px;
vertical-align:middle;
}
h1 {
text-align: center;
font-size: 1.4em;
margin: 0px auto;
padding: 0px 0px 5px 0px;
width: 50%;
display:inline-block;
}
Cela ne centriste pas ma teneur en H1 dans la page. Il le centre dans l'espace restant, mais je veux qu'il soit centré dans tout le bloc.
La deuxième jsfiddle que vous avez donnée réellement fait l'affaire. En utilisant la position : relatif; tout va bien. Le est parfaitement centré et si le
augmente de hauteur, il pousse simplement le contenu ci-dessous. Merci!
Cela devrait toujours fonctionner Pour autant que je sache! Fondamentalement, cela ajoute simplement un débordement caché, ce qui rend le H1 conscient de l'espace pris par l'élément flotté afin qu'il prend la zone restante!
Cela devrait toujours travailler aussi loin que je sache! Profitez de votre codage :) Ceci explique simplement que cela ajoute simplement le débordement caché, ce qui rend le H1 conscient de l'espace pris par l'élément flotté afin qu'il prend la zone restante!
Désolé si j'étais peu clair, mais j'essayais d'avoir le
Donc, s'il y a une image que vous voulez en dessous? centré sur le rapport
et non centré dans l'espace restant . Merci pour votre temps si .. :)
Voir ce jsfiddle.net/8b9zf/26