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

Question

我有一个<h2>，其中有两个<img>（每边一个），我希望这些显示在<div>的中间，就像在<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 --> 中一样下面的图片......我尝试了一些东西，但我只是将它们水平居中，一个放在另一个上面。

参考图片：

HTML：

#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;
}

CSS：

{{1}}

Answer 1

尝试以下方法：

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

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

Answer 2

我为你创建了一个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

Answer 3

尝试将项目放置在垂直居中的绝对定位容器中，并使用内联块将其水平居中放置在垂直居中的容器中： JSFIDDLE DEMO

HTML：

<div id="kolom5Nav">
    <div class="container">
        <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>
</div>

CSS：

#kolom5Nav {
    display: block;
    position: relative;
    height: 141px;
    width: 100%;
    background: #fdd400;
    color: #044584;
    text-align: center;
}
#kolom5Nav .container {
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    width: 100%;
}
#kolom4Back, #kolom4Forward, h2 {
    display: inline;
}

* reference

Answer 4

要水平和垂直居中，你需要使用table-cell而不是table（并垂直对齐到中间）。

工作示例：http://jsfiddle.net/9mb40vsx/

CSS：

#kolom5Nav {
    display: table-cell;
    height: 141px;
    width: 1440px;
    background: #fdd400;
    text-align: center;
    vertical-align:middle;
}
#kolom5Nav a {
    vertical-align: middle;
    display:inline-block;
}
#kolom5Nav a img {
    vertical-align: middle;
    display:inline-block;
}
#kolom5Nav h2 {
    color: #044584;
    display:inline-block;
    margin:0;
}