0

I am trying this solution (first answer) to vertically align an image over a div that has the following additional css properties so it takes the whole space:

    position: absolute; 
    top: 0px; 
    bottom: 0px;
    left: 0px;
    right:0px;

The problem is, even with the fiddle referenced in the original question (here), if you add an additional span with a text, separated by a <br/>, this span shows outside of the containing div.

I want to align both the image and caption inside the div.

Any ideas?

HTML:

<html>
<head>
<title>Splash screen</title>
<style>
.frame {
    position: absolute; 
    top: 0px; 
    bottom: 0px;
    left: 0px;
    right:0px;
        text-align: center; 
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
img {
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}
</style>
</head>
<body>
<div class="frame">
    <span class="helper"></span>
      <img class="center" src="img/splash/splash.png" />
      <br />
      HELLO WORLD
</div>
</body>
Community
  • 1
  • 1
MichelReap
  • 5,630
  • 11
  • 37
  • 99

1 Answers1

2

To adjust with <br />, you'll have to change height to min-height

updated fiddle

and this is your css :

frame {
    min-height: 25px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    text-align: center; margin: 1em 0;
}

Also, in your example fiddle, class is assigned wrong way :

<div class=frame>

this is wrong

<div class="frame">
      /*___^_____^ see the quotes */

EDIT

In you case...keep span inline and set position:relative

span.helper {
    display: inline;
    height: 100%;
    vertical-align: middle;
    position: relative;
}

wroking demo

EDIT 2

Use display:table to achieve your purpose rather than position.

Note CSS table is IE8= compatible!!

working fiddle 

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.table {
    display:table;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.frame {
    display:table-cell;
    vertical-align:middle;
    border: 1px solid red;
    text-align: center;
}
.helper {
    display: inline;
    height: 100%;
    vertical-align: middle;
    position: relative;
}
img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}
NoobEditor
  • 15,563
  • 19
  • 81
  • 112
  • I can't change the height, as I posted my div needs to stretch both on width and height to the size of the window, so I use a `position: absolute` and fix all positions to zero. – MichelReap Jan 21 '14 at 11:43
  • @MichelReap : can you give me your fiddle...not the reference one....that will help draft custom solution for you!! :) – NoobEditor Jan 21 '14 at 11:47
  • the problem is, that does not center vertically – MichelReap Jan 21 '14 at 11:54
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/45707/discussion-between-noobeditor-and-michelreap) – NoobEditor Jan 21 '14 at 11:56