3 replies [Last post]
Sun, 2010-02-07 07:50
Borkoff
Borkoff's picture
User offline. Last seen 4 weeks 1 day ago. Offline
newbie
Timezone: GMT+2
Joined: 2010-01-08
Posts: 7
Points: 11

Hello everybody!

So I have this problem with centering vertically. I found this page about vertical-centering-with-css but none of these 5 posibilities solves my problem.

I have a div#mapAndQuestions in which I have a

    on the left side and a image on the right side.

div#mapAndQuestions
{
height:60%;
min-height:200px;
}

so this div#mapAndQuestions resizes whenever the browser windows is being resized but it stops ar 200px;

and
ul#questions
{
height: 300px;
display:table-cell;
vertical-align:middle;
}

in this solution when display:table-cell; vertical-align:middle;I have to define the height of

    in px because it will not work in % but I would like to define the height 100% so it fits the parent DIV but as I said % does not work with display: table-cell. so 300px is only approximately 60%.
    and one more thing that I can not position nor relatively or absolutely this
      in this case

this solution is only nearly good but may be there is a perfect solution?
maybe JavaScript would help?

Top
Tags:
Sun, 2010-02-07 12:03
#1
gary.turner
gary.turner's picture
User offline. Last seen 1 hour 5 min ago. Offline
rank Moderator
Moderator
Timezone: GMT-6
Joined: 2004-06-25
Posts: 6578
Points: 252

Does the following do what

Does the following do what you want? It's adapted from my demos, vertical centering using css.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="en">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux (vers 7 December 2008), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" />
  <meta http-equiv="Content-Type"
        content="text/html; charset=utf-8" />
 
  <title>Nested Centering Test</title>
 
  <style type="text/css">
/*<![CDATA[*/
 
  html {
    display: table;
    height: 100%;
    }
 
  body {
    display: table-cell;
    vertical-align: middle;
    }
 
  p, h1 {
    margin-bottom: 0;
    }
 
  ul {
    background-color: blue;
    border: 2px solid red;
    list-style: none;
    margin: 1em auto 0;
    padding: 20px;
    text-align: center;
    word-spacing: -.3em;
    }
 
  li {
    border: 1px solid black;
    display: -moz-inline-box;
    display: inline-block;
    margin-left: -1px;
    vertical-align: middle;
    word-spacing: 0;
    }
 
* html li {
    display: inline;
    }
 
*+html li {
    display: inline;
    }
 
  a {
    display: block;
    padding: .6em;
    background-color: blue;
    color: #fff;
    text-decoration: none;
  }
 
  a:hover {
    background: #fff;
    color: #009;
  }
 
  /*]]>*/
  </style><!--[if lt IE 8]>
<style type="text/css">
body {
    top: 50%;
    left: 0;
    position: relative;
    zoom: 1;
    }
 
h1, p, ul {
    position: relative;
    top: -50%;
    }
 
</style>
<![endif]-->
 
</head>
 
<body>
  <h1>Centering a Floated Widthless Navbar.</h1>
 
  <p>Tested in IE&nbsp;6-8, FF&nbsp;2&amp;3.5, Opera&nbsp;10, and 
     Safari/Win&nbsp;4.</p>
 
  <ul id="navbar">
    <li><a href="#">Link One</a></li>
 
    <li><a href="#">Link Two
    <br />
    on two lines</a></li>
 
    <li><a href="#">Link Three running on a bit</a></li>
 
    <li><a href="#">Link Four</a></li>
 
    <li><a href="#">Link Five</a></li>
 
  </ul>
 
  <p>The menu above is be both vertically and horizontally centered in
  the red bordered blue container.</p>
</body>
</html>

cheers,

gary

Unplanned code results in a tangled wad of brain cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Top
Tue, 2010-02-09 10:42
#2
Borkoff
Borkoff's picture
User offline. Last seen 4 weeks 1 day ago. Offline
newbie
Timezone: GMT+2
Joined: 2010-01-08
Posts: 7
Points: 11

thx for your advice. I see

thx for your advice.
I see what you were trying to achieve with

html {display: table
}

and

body {display: table-cell;
vertical-align: middle;
}

but I do not see how your list is centered because if I set the height of [ul] ie 400px then it is not centered vertically.

if I put [ul] in a [div style="height:400px"] then this is not centered vertically

Top
Tue, 2010-02-09 17:55
#3
gary.turner
gary.turner's picture
User offline. Last seen 1 hour 5 min ago. Offline
rank Moderator
Moderator
Timezone: GMT-6
Joined: 2004-06-25
Posts: 6578
Points: 252

I'm not sure what end result

I'm not sure what end result you want. See centering inline elements. If that's (the last example) not helpful, show us an image of what you want.

cheers,

gary

Unplanned code results in a tangled wad of brain cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Top