在对话框标题栏中将文本与图像对齐

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>