I want to put a text to the right on top of an image but it is always placed to the right BELOW the image, I leave the code in html
and, I would like to know if it can be done in html
or in css
? because I can't achieve anything in css
.
<div>
<img src="http://lorempixel.com/300/200/"> (imagen en cuestion)
<p>Lista de Lubricantes</p> <!-- esto es lo que quiero que vaya a la derecha -->
</div>
I see that almost everyone tells you about the fact of using
float: left
it and, however, no one explains to you why this effect occurs.Actually this occurs because the labels
p tags
have the property by defaultdisplay: block
and this makes them act as blocks and the text is lowered just below the image.However, you can make elements act like elements
inline
(placed on the same line) but have the properties of blocks (they can have height, width...). This is achieved through the propertydisplay: inline-block
. In this way, the text will be placed to the right of the image since it will be positioned on the same line as the image.Finally, to put the text at the top you could use the property
vertical-align
, a property that only acts on elementsinline
but since we have indicated that our text acts asinline-block
then it will allow us to use it. Through this property we can determine where an element is going to be alignedinline
within the line in which it is located. In this case, since we want it to be at the top, we will have to use thetop
.If you want the text to appear to the right of the image, all you have to do is float the image to the left (with
float:left
):You could remove the
<p>
and also define thestyle="float:left;
in the image.This code may help you. You place the image and the text inside a common container and then you play with the position of the text inside that container by means of absolute positions.