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

I have an <h2> with two <img>'s (one on each side), and I want these to be displayed in the middle of a <div> like in the picture below...I've tried something but I managed only to center them horizontally and one on top of the other.

我有一个带有两个的

(每边一个),我希望这些显示在

的中间,如下图所示......我尝试了一些东西,但我设法只是将它们水平居中,一个放在另一个的顶部。

Reference image:

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

4 个解决方案

#1

I have created a JSFiddle for you. Basically adding display: inline-block to your img and h2 elements and then adding a line-height on your div will give you the output you want.

我为你创建了一个JSFiddle。基本上添加display:inline-block到你的img和h2元素,然后在div上添加一个line-height将为你提供你想要的输出。

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

链接到JSFiddle

#2

Try positioning the items in a vertically centered absolute positioned container and using inline block to center them horisontally within that vertically centered container: JSFIDDLE DEMO

尝试将项目放置在垂直居中的绝对定位容器中,并使用内联块将其水平居中放置在垂直居中的容器中: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

#3

Try the following:

请尝试以下方法:

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

#4

To center things horizontally and vertically, you need to use table-cell, not table (and vertically align to middle).

要水平和垂直居中,您需要使用table-cell而不是table(并垂直对齐到中间)。

Working example: http://jsfiddle.net/9mb40vsx/

工作示例: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;
}