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和文本就在图标旁边。

Answer 1

您需要在width中添加span，并使用名为max-width类width的{{1}}打算。

＆＃13;

eventPic

＆＃13;

.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%
}

＆＃13;

如何设置我的跨度文本垂直对齐和我的图像旁边？

1 个答案: