Vertically align text next to an image
Place to talk about website HTM elements, CSS style and design, and get help with HTML, CSS codes.
-
PloMar
- Posts: 48
Vertically align text next to an image
Hello
I have the following html code. I try to center vertically a text next to an image, both into a Div.
Code: Select all
<div>
<img src="image.jpg" style="width:200px; height:65px" />
<span style="vertical-align: middle">Doesn't work.</span>
</div>
If I add "vertical-align: top;" it does work, the text is displayed on top. Why won't "vertical-align: middle;" work?
MarPlo
Posts: 186
Hi,
Try to add "vertical-align: middle;" to both elements; <img> and text.
And, if you want to have multiple lines of text centered vertically next to image, add the text into a Div and apply "display: inline-block;" to it.
Example:
Code: Select all
<style>
#dv1 {
position: relative;
margin: 3px auto;
width: 80%;
border: 1px solid #33e;
text-align: center;
padding: 4px;
}
#dv1 img {
width: 200px;
height: 65px;
vertical-align: middle;
}
#dv1 div {
display: inline-block;
vertical-align: middle;
}
</style>
<div id="dv1">
<img src="image.jpg" alt="Image" />
<div>Perfectly centered.<br>
Other line of text.</div>
</div>
Demo:
Perfectly centered.
Other line of text.
Similar Topics
-
Speech to text without https
General Forum
First post
Pleasant Coursesweb,
Is their anything posible without https for speech to text fill-in ?
Or must I turn my SSL document on the XAMPP-server ?
Last post
Hello,
I don't know about speech to text fill-in.
Anyway, I want to inform you that this forum will be closed for register or posting.
Any...
-
Link inline with the text
HTML - CSS
First post
Hi members I'm looking for the script for a link <href> to another URL.
I give part of my text and the link as it is now on my page:
and...
Last post
Hello,
In your case, put both the text and the link inside the <p> tag.
<p>and there where useful, supplemented with comments, tips...