Jump to content

Centering Text Vertically


Johnny2

Recommended Posts

I'm trying to center text inside it's parent container. It seems like it should be super easy, but it's been kicking my butt for like 4 hours.

What am I missing? I thought "vertical-align: middle" was what I needed, but it's not working.

Please.... can someone please help me?

Here is the html/css code:

 

 

 

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>kicking my butt!</title>

<style>

 

* {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

line-height: 1.5em;

text-decoration: none;}

 

header {

background-color:#C00;}

 

.header-middle h1 {

height: 400px;

vertical-align:middle;

text-align: center;

font-size: 36px;

font-family: Verdana, Geneva, sans-serif;

color: #0F0;

background-color: #000;

overflow: hidden;}

 

</style>

</head>

 

<body>

 

<header>

<div class="header-middle">

<h1>Text to be centered vertically within the black box, but don't know how...</h1>

</div><!--end of header-middle div-->

</header>

 

</body>

 

</html>

Link to comment
Share on other sites

I just wanted to add you probably should put the body tag in your zeroing out css. * body { code here } The reason is the body will put margin on automatically. Sometimes it will not matter and sometimes it will. Especially when doing a full width web site. You will have a little white space on the sides. Putting the body tag in takes care of this.

Link to comment
Share on other sites

Oh sorry then. I was taught wrong. I was taught that the * is the short cut for html in css. Also I built a site that the header was full width and to make it go all the way in the browser window I had to put in the body tag with the *. This was a few years age. So maybe things changed. I also just went and looked at random sites all of them had * body in the css.

 

Do not get me wrong I want to do things the right way and do not want to give the wrong advice.

Link to comment
Share on other sites

Thank you very much Eric! This works sweet, and if I just replace the text with an image (and adjust the "wrap" div width to the same as the picture) it works great.

 

One more question though...

If I want to align that image vertically BUT to the RIGHT, what change do I make? It seems there is a default setting somewhere for horizontal centering that isn't being expressed, but I don't know where that would be to change from "center" to "right".

Edited by Johnny2
Link to comment
Share on other sites

If its just one line then just give it line height to match that of its container. If its multiple lines or an unknown height you can do it like this http://www.visibilityinherit.com/code/css-vertically-center-unknown-height.php

 

 

Thank you very much Eric! This works sweet, and if I just replace the text with an image (and adjust the "wrap" div width to the same as the picture) it works great.

 

One more question though...

If I want to align that image vertically BUT to the RIGHT, what change do I make? It seems there is a default setting somewhere for horizontal centering that isn't being expressed, but I don't know where that would be to change from "center" to "right".

Link to comment
Share on other sites

like this

 

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>kicking my butt!</title>

<style>

 

* {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

line-height: 1.5em;

text-decoration: none;}

 

header {

height: 400px;

text-align: center;

background:#000;

}

 

.header-middle h1 {

font-size: 16px;

line-height:400px;

font-family: Verdana, Geneva, sans-serif;

color: #0F0;

overflow:hidden;

float:right;

}

 

</style>

</head>

 

<body>

 

<header>

<div class="header-middle">

<h1>Text to be centered vertically within the black box, but don't know how...</h1>

</div><!--end of header-middle div-->

</header>

 

</body>

 

</html>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...