align text with image in title bar on dialog box

Question

There is any way to customize with css the "your title" in this Fiddle, for example, put it aligned with the image? http://jsfiddle.net/saikotju/F9uR3/3/

<span class="dialog">English</span>

<div id="dialog" class="dialogBox" title="LessonSelected"></div>

$(function() {

    $('#dialog').dialog({
        resizable:false,
        autoOpen: false,
        title:'<img src="http://weeklyprobateleads.com/wp-content/uploads/2014/10/download-icon-probate-leads.png" /> Your Title',
        buttons: {
            "Enrol": function(){
                $(this).dialog('close');
                choice(true);
            },
            "Cancel Enrol": function(){
                $(this).dialog('close');
                choice(false);
            }
        }
    });

    $( ".dialog" ).click(function(){        
        $('#dialog').dialog("open");
    });
});


.ui-dialog-title {
    color: white;
}

thanks

Answer 1

This should do it:

.ui-dialog-title img {
    vertical-align:middle;
}

jsFiddle example

Answer 2

Try this :

 $(function() { $('#dialog').dialog({ resizable:false, autoOpen: false, title:'<img src="http://weeklyprobateleads.com/wp-content/uploads/2014/10/download-icon-probate-leads.png" /> Your Title', buttons: { "Enrol": function() { $(this).dialog('close'); choice(true); }, "Cancel Enrol": function() { $(this).dialog('close'); choice(false); } } }); $( ".dialog" ).click(function(){ $('#dialog').dialog("open"); }); }); 

 .ui-dialog-content div { background: url(https://www.google.com/logos/2014/worldcup14/opening/cta.png) no- repeat !important; } 

 <table> <tr> <td> <span class="dialog">English</span> </td> <td> <div id="dialog" class="dialogBox" title="LessonSelected"> <img src="https://www.google.com/logos/2014/worldcup14/opening/cta.png" /> </div> </td> </tr> </table>