comment aligner une image entre un texte?

J'ai donc travaillé sur une page avec du texte et une image. Cependant, je ne peux pas trouver un moyen de mettre l'image entre le texte. soit il reste en haut à gauche, soit il ne se centre que horizontalement. voici le code qui est d'importance:comment aligner une image entre un texte?

<style> 
body { 
margin: 0; 
background-image: url("rainbowbg.png"); 
} 
div #hype { 
margin-left: auto; 
margin-right: auto; 
display: block; 
positon: relative; 
} 
#hypetop { 
position: fixed; 
top: 0; 
width: 100%; 
} 
#hypebot { 
position: fixed; 
bottom: 0; 
width: 100%; 
} 
.hypetext { 
font-family: Impact, Charcoal, sans-serif; 
font-size: 64px; 
text-align: center; 
} 
</style> 
<body> 
<div> 
<h1 class="hypetext" id="hypetop">DIRE</h1> 
<img id="hype" src="DIREHYPE.png" width="224" height="224"> 
<h1 class="hypetext" id="hypebot">HYPPPPPPPPPPPE</h1> 
</div> 
</body>

Si quelqu'un sait comment je pourrais obtenir l'image centrée entre le texte, ce serait génial.

Source

2014-09-06 BeepBoop BapBop

Vous pouvez utiliser ce code css réactif. Cela peut être utile pour vous. Essayez-le.Je peux changer seulement position:fixed à position:relative.

Live Working Demo

Code HTML:

<div> 
<h1 class="hypetext" id="hypetop">DIRE</h1> 
    <img id="hype" src="http://s30.postimg.org/qnju89rkx/banner.png" width="224" height="224"/> 
<h1 class="hypetext" id="hypebot">HYPPPPPPPPPPPE</h1> 
</div>

CSS code:

body { 
margin: 0; 
background-image: url("rainbowbg.png"); 
} 
div #hype { 
margin:auto; 
display: block; 
position: relative; 
margin-top:50px; 
} 
#hypetop { 
position: relative; 
top: 0; 
width: 100%; 
} 
#hypebot { 
position:relative; 
bottom: 0; 
width: 100%; 
} 
.hypetext { 
font-family: Impact, Charcoal, sans-serif; 
font-size: 64px; 
text-align: center; 
}

Résultat:

result

Source

2014-09-06 18:12:00 Developer

merci. Cela a fonctionné parfaitement pour moi. –

Votre bienvenue chérie. – Developer

vous devez les imaginer comme des blocs d'abord. De ce que je reçois .. vous avez besoin de 3 blocs dans l'ordre horizontal: paragraphe | image | paragraphe, ce qui nous donne la structure suivante:

<p></p><img></img><p></p>

ce qui vous manque est .. que vous devez utiliser la balise span lieu fo une balise pour les rendre pas briser. Ce qui est à l'opposé de faire la page réactive (à l'aide)

les mettre simplement comme ceci:

<span> 
<span id="test"><h1></h1></span> 
<img src="" width="200px" height="200px" /> 
<span id="test"><h1></h1></span> 
</span>

#test { 
position: relative; 
height: 200px; 
width: 200px; 
text-align: center; 
display: block; 
}

donnant les règles ci-dessus ... met css le texte dans un bloc invisible/transparent .. car nous ne déclarons aucune valeur de couleur de fond. donc tous les 3 blocs deviennent de taille égale .. 200px par 200px .. côte à côte dans une ligne ..

Source

2014-09-06 17:53:26

Remove position: fixed; de hypetop et hypebot. Cela a provoqué que ces éléments aient des positions fixes et non relatives à l'image.

Source

2014-09-06 17:54:27

comment aligner une image entre un texte?

Répondre

Questions connexes