2017-07-06 5 views
2

Hia! J'ai le texte sur le côté de l'image que je veux. Comme vu ci-dessous.Alignement horizontal, avec le texte en haut de l'image?

https://image.ibb.co/bWWO0F/Capture.jpg

Et pourtant, je me bats pour obtenir le texte en haut de l'image, comme mon dessin étonnant ici ...

https://image.ibb.co/ksgZ7v/Capture1.jpg

Comment puis-je faire cela?

Voici mon HTML ...

<div> 
    <img style="vertical-align:middle" width="350" class="img-circle" align="top" src="image.jpg"> 
    <p>Works.</p> 
</div> 
+0

les gars, peut-il vraiment désolé de ne pas faire le démarquage de travailler, avec mes points de rep je peux à peine faire quoi que ce soit et ma connaissance ... s'il vous plaît voir ce lien? https://anotepad.com/notes/32na8h –

+0

Got it! Peu importe :) –

Répondre

0

Utilisez flexbox.

.flexbox { 
 
    display: flex; 
 
    border: 1px solid; 
 
    padding: 15px; 
 
} 
 

 
.img-circle { 
 
    border-radius: 100%; 
 
}
<div class="flexbox"> 
 
    <img style="vertical-align:middle" width="350" class="img-circle" align="top" src="http://placehold.it/350x350"> 
 
    <p>Works.</p> 
 
</div>

+0

Qu'est-ce qui ne fonctionne pas? – Sun

+0

Nevermind! Ca a marché, mate ta légende! À votre santé! –

-1

En utilisant la balise pause, vous pouvez accomplir cela avec html simple.

<label>Text</label> 
<br> 
<img> 

Oui, c'est aussi simple que ça, mais ce n'est pas si extensible. Je veux dire que vous pouvez diviser les lignes, mais vous ne décidez pas de la hauteur ou de la position ou quoi que ce soit. Afin de faire cela de la bonne façon et non bâclée, vous devez mettre en œuvre css.

+0

Merci! Cela fonctionne en faisant le texte sur le dessus de l'image, mais j'étais en quelque sorte à la recherche du texte sur la même ligne, mais juste formaté pour être en première ligne ... savoir ce que je veux dire? –