I have an image, and a text block after it. I would like to align this text so that it is in the "middle" (so that it is equal to the top and bottom) of the image, preferably without using other elements, so that it is completely reliant upon CSS.
The same solution needs to be used within a <div> and a <button> element.
Example: http://h4xr.org/k8x7
The "Add Sleep" text should appear centrally aligned towards the "plus" icon.
This is the exact purpose of the vertical-align. It works perfectly cross-browser assuming that the img element remains an inline element and it's in a row of other inline elements.
The same solution needs to be used within a <div> and a <button> element.
Example: http://h4xr.org/k8x7
The "Add Sleep" text should appear centrally aligned towards the "plus" icon.
Thanks,
Nick
and the CSS:
.sleep {background: url(path_to_your_image/image.png) no-repeat scroll left center;
padding:0 0 0 30px;
}
Adjust the padding to suit.
Thanks,
Nick
img { vertical-align: middle; }This is the exact purpose of the vertical-align. It works perfectly cross-browser assuming that the img element remains an inline element and it's in a row of other inline elements.