Display text and images in the center of div

Question

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: enter image description here

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

possible duplicate of [Best way to center a
on a page vertically and horizontally?](http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally) — Paulie_D, Nov 25 '14 at 16:16

j08691 · Answer 1 · 2014-11-25T16:21:36.240

0

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

edited Nov 25 '14 at 16:21

answered Nov 25 '14 at 16:12

j08691

204,283
31
260
272

Ok, but it's not vertically aligned – Valeriu92 Nov 25 '14 at 16:14
@Valeriu92 per my answer below, if you add a line-height to the main div that is the same as your height you will center the content vertically. – CaldwellYSR Nov 25 '14 at 16:16

score 0 · Accepted Answer · edited Nov 25 '14 at 16:27

0

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.

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

edited Nov 25 '14 at 16:27

misterManSam

24,303
11
69
89

answered Nov 25 '14 at 16:15

CaldwellYSR

3,056
5
33
50

Thanks, this works perfectly for me! One more thing I want to know is if that this is a correct implementation or it is "forced" to show the result – Valeriu92 Nov 25 '14 at 16:22
I'm not quite sure what you mean. This isn't a hack to show the result if that's what you're asking. Basically you're telling the browser to consider these elements like words on a page. So the alignment of them comes from `text-align: center;` and `line-height`. – CaldwellYSR Nov 25 '14 at 16:25
@misterManSam thank you for editing that. I was trying to get it working but for some reason it didn't want to show me the code. – CaldwellYSR Nov 25 '14 at 16:28
@CaldwellYSR - Just need to add an empty line after `HTML:`. Check the edit :) – misterManSam Nov 25 '14 at 16:29
@misterManSam Ah! I knew that until I needed it! – CaldwellYSR Nov 25 '14 at 16:30

score 0 · Answer 3 · answered Nov 25 '14 at 16:16

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

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

score 0 · Answer 4 · answered Nov 25 '14 at 16:22

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

Working example: 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;
}

Display text and images in the center of div

4 Answers4