在對話框標題欄中將文本與圖像對齊

Question

有什么方法可以使用CSS在這個Fiddle中自定義“您的標題”，例如，使其與圖像對齊？ 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;
}

謝謝

Answer 1

應該這樣做：

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

jsFiddle示例

Answer 2

嘗試這個 ：

 $(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>