WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

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:

<!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:

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties