1

So I have a school project. I must make my own website. I have a problem though: I can't vertically align h1 along 2 images floating left and right.

embedding it in a div and using vertical-align: middle; doesn't help. even with a prefix hack that I found here

here is the source code of my website project:

Html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>The dankest website on earth</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="CSS/CSS.css">
    </head>
    <body>
        <div id="header">
            <img class="DebugBorder" src="images/lenny.png" title="memes.wav" style="float: right;" width="200px" height="200px" />
            <img class="DebugBorder" src="images/lenny.png" title="memes.wav" style="float: left" width="200px" height="200px" />
            <h1 class="DebugBorder">Sample text</h1>
        </div>        
    </body>
</html>

CSS

.DebugBorder{ border: 2px red solid}

body {background:linear-gradient(to bottom, darkred, black);background-repeat: no-repeat;}

html {height: 100%;}

h1 {text-align: center; font-size: 4em; font-family: impact; width: 50%; margin: auto; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: white;}

#header {height: 200px}

I removed any solutions that didn't worked and kept it to my bare minimum.

Community
  • 1
  • 1
Delupara
  • 359
  • 1
  • 4
  • 10
  • 1
    In order for `vertical-align: middle` to work, the `

    ` has to have the display type `inline-block` or a table display type. Maybe try that?

     – Aeolingamenfel Nov 13 '15 at 18:52
  • not working. I'm not sure why but I was told that you can't vertically align a block element. – Delupara Nov 13 '15 at 18:56
  • Inline block acts like a character/word of text, essentially, so you can actually apply `vertical-align` to it. If that doesn't work, I'd recommend wrapping it all in a table. – Aeolingamenfel Nov 13 '15 at 18:58

2 Answers2

0

If you want the text vertically centered between the images, a table display would work fine.

Your CSS changes would look something like 

#header {
    height: 200px;
    display:table;
}
.DebugBorder{ 
    border: 2px red solid; 
    display:table-cell;
    width:29%;
}

Here's a fiddle using your code: https://jsfiddle.net/dy4nycjk/1/

But if you want the text vertically centered and covering the images, you'll have to do a little more work with positioning. Here's another fiddle with an example of the text centered over your two images: https://jsfiddle.net/ktLn72yq/

dearSympho
  • 112
  • 2
  • 6
0

If your H1 title is only a single line then you can set it's line-height to match the height of the images. So in this case:

.DebugBorder { 
    border: 2px red solid;
    line-height:200px;
}

That should align the H1 to middle of the images.

Edit: Or apply the line-height to the H1 element instead of the debug class like I just realized. :)

Shawshank237
  • 83
  • 9