如何設置我的跨度文本垂直對齊並與我的圖像相鄰？

Question

的CSS

.section_header {
    background-color: gray;
    width:100%;
    height:5em;
    display: table;
}

.section_header span {
    font-size: 1.5em;
    color:#740000;
    display:table-cell;
    vertical-align:middle;
}

.eventPic {
    width:20%;
    border:1px red solid;
}

的HTML

<div class="section_header">
    <span>
        <img src="image/bt_event.png" class="eventPic">
    </span>
    <span>服務說明</span>
</div>

我已經設置了一個表格單元格，使我的內容與div區域垂直對齊。 現在，我的圖標和文本之間有一些間距。

這是jsfiddle 。

我該如何解決？ 我想要的是該div的圖標和文本垂直對齊，並且文本在icon旁邊。

Answer 1

您需要同時在span添加width ，並使用max-width作為指定的image eventPic類max-width的width 。

 .section_header { background-color: gray; width:100%; height:5em; display: table; } .section_header span { font-size: 1.5em; color:#740000; display:table-cell; vertical-align:middle; } .eventPic { /*width:20%;*/ max-width:100%; border:1px red solid; } .section_header span:nth-child(1){ width:4% } .section_header span:nth-child(2){ width:96% } 

 <div class="section_header"> <span><img src="image/bt_event.png" class="eventPic"></span> <span>服務說明</span> </div>