Advertisements
How to Vertically Align Text Next to an Image Using CSS
Topic: HTML / CSSPrev|Next
Answer: Use CSS vertical-align Property
You can simply use the CSS vertical-align property with the value middle to vertically align the text which is next to an image (e.g. user profile or avatar icon before name, etc.).
Let's try out the following example to understand how it basically works:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Align Text Next to an Image Vertically</title>
<style>
img{
vertical-align: middle;
}
</style>
</head>
<body>
<p>
<img src="images/diamond.jpg" alt="Avatar" />
Vertically aligned text
</p>
</body>
</html>Related FAQ
Here are some more FAQ related to this topic:
- How to align text vertically center in a DIV element using CSS
- How to position text over an image using CSS
- How to align content of a DIV to the bottom using CSS
Advertisements
