'Center text next to image in dynamically created div. jQuery

At the moment, the text is aligned with the top of the image. Is there any way for me to pad the text down so it is aligned with the center of the image?

Any padding I add to ui-title moves the entire div.

Or would I have to restructure the jQuery to achieve this?

           pageDiv.append(
                $('<div>').addClass('ui-title').text('hello').append(
                    $('<img class="confirm" src="image.png" alt="" height="30" width="30"></img>')
                )
            )
jquerycss


Solution 1:[1]

There is no need for </img>. img tags can be self closing so you can change your declaration to <img class="confirm" src="image.png" alt="" height="30" width="30" />.

You can use vertical-align: middle; but you'll need to make sure the div containing your text is set to be an inline element to vertically align it which can be done using display: inline;. You can also use display: inline-block; with vertical-align which has a mix of properties between inline and block elements as the name suggests.

Solution 2:[2]

Fixed it, not perfect but it works. Just added this CSS.

    .ui-title img{
        margin-top: -5px;
        margin-right: 5px;
    }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Daft

Related Questions