html - 在div的中心显示文本和图像

Question

我有一个 <h2>有两个<img>的(每边一个)，我希望这些显示在 <div> 的中间如下图所示...我已经尝试了一些方法，但我只能将它们水平居中并且一个放在另一个之上。

引用图片:

HTML:

<div id="kolom5Nav">
    <a href="#"><img id="kolom4Back" src="images/back.png" /></a>
    <h2>Evenementen</h2>
    <a href="#"><img id="kolom4Forward" src="images/forward_blue.png" /></a>
</div><!-- end kolom5Nav -->

CSS:

#kolom5Nav {
    display: table;
    height: 141px;
    width: 1440px;
    background: #fdd400;
    text-align: center;
}
#kolom5Nav #kolom4Back{

    vertical-align: middle;
}
#kolom5Nav #kolom4Forward{

    vertical-align: middle;
}
#kolom5Nav h2{
    color: #044584;
}

Answer 1

我已经为您创建了一个 JSFiddle。基本上是将 display: inline-block 添加到您的 img 和 h2 元素，然后在您的元素上添加 line-height div 将为您提供所需的输出。

HTML:

<div id="kolom5Nav">
    <a href="#"><img id="kolom4Back" src="images/back.png" /></a>
    <h2>Evenementen</h2>
    <a href="#"><img id="kolom4Forward" src="images/forward_blue.png" /></a>
</div>

CSS:

#kolom5Nav {
    display: table;
    height: 141px;
    width: 1440px;
    line-height: 141px;
    background: #fdd400;
    text-align: center;
}
#kolom5Nav #kolom4Back{
    display: inline-block;
    vertical-align: middle;
}
#kolom5Nav #kolom4Forward{
    display: inline-block;
    vertical-align: middle;
}
#kolom5Nav h2{
    display: inline-block;
    vertical-align: middle;
    color: #044584;
}

Link to JSFiddle