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
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
-
Get and split in php text from text-file
PHP - MySQL
First post
Dear Admin i`m back again with something new...
How can i show into a php document text from an text-file ?
i have this code into the text file...
Last post
Hello,
You can use file_get_contents() to get a string with file data.
Then, with explode() you can split that string by the separator you want,...
-
Add image with dynamic src in HTML using javascript
JavaScript - jQuery - Ajax
First post
Hello
Anyone know how to directly display in HTML an image with dynamic SRC, from external URL address, using JavaScript?
To have in html something...
Last post
Hello
Try this code:
<div id= dimg >Here add image</div>
<script>
var dimg = document.getElementById('dimg');
//receives the JPG...
-
CKEditor Image Browse - Root back directory
Scripts from this website
First post
Most likely out of ordinary use, but need to have root image path like:
../mathtest/data/img
Cannot seem to get working.
Have tried:
protected...
Last post
My bad. Seems I was not going up extra directory.
Solved by adding extra ../
Cheers!
-
Enable text box when checkbox is checked
JavaScript - jQuery - Ajax
First post
Hello,
I have this html code:
<label><input type='checkbox' id='chb1' value='1' />Add text</label><br>
<textarea...
Last post
Hello,
1. With javascript, register a 'click' event to the checkbox element.
2. In the function called by that click event check if the checkbox is...
-
Add IP address in input text field
PHP - MySQL
First post
Dear admin i `m thankfully for your support `just great`.
With both examples for <input type= text > it shows only string(13) but not the...
Last post
Thank you so mutch stupido me i had to use: <?php echo $ip; ?>