Align text in middle next to icon

HTML & CSS
1

I have a css class like this:

.something {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #333333;
	text-decoration: none;
	text-align: left;
	padding-left: 15px;
	line-height: 19px;
}

inside div tag I have a 32*32 icon and next to it a short text. But text is in bottom next to icon, I want to align the text in middle next to icon. How can I do it? I added vertical-align:middle to class too but nothing changed. Should I have icon and text in 2 separate div classes that both are inside a div themselves? please advice.

2

vertical-align only applies to inline and table elements (including display:table)

Try setting your div to display:inline-block; then it should respond to v-align as long as your image is still an inline element.

If you still have trouble post the html and all relevant css. :slight_smile:

You should also do away with the 11px font-size, too small! Size your font in ems, rems or %

3 Likes
3

It’s hard to say without seeing what you have done in your html.
It may be that you only need to apply vertical-align to the image itself. Setting v-align on the parent element does not work, it applies to the elements that need to align.

Something like this –

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vertical-align</title>
<style>

.something span,
.something img {
    display:inline-block;
    vertical-align:middle;
    width:32px;
    height:32px;
    background:red;
}

</style>
</head>

<body>

<div class="something">
    <p>Text to v-align with image <span></span> Text to v-align with image</p>
</div>

</body>
</html>
1 Like
4

Personaly I think you are asking the wrong question.
You want to center the text with the icon, but I would advice you to center the icon with the text.

Text will change more easily in length (& thus space taken) then an icon with most likely fixed dimensions.
If you make the block responsive, the likeliness the height of the text changes is bigger.
It could be the icon is bigger then the text now, but that’s easily solved with some padding on the text. Chances are high that the text will become bigger then the icon, when the block gets smaller.

But if you want the CSS code for what works, you’ll have to give us your HTML as well, especially how you thought about putting the icon in there (Is it a background-image, icon font, img or object ? )

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.