Thanks to Chris and Tom,
I ended up adding a wrapper DIV around the topnav DIV to make it center
correctly. Thanks Guys.
To restate the problem is a different way.
The challenge is to display a light blue bar 33pixels high across the top of
the page. Within that bar, place the global links Home | Contact | Links.
Position the links on the right in line with the content below which is
950px wide.
Here is the code
#header-topnavbar {
background-color: #E7F5FE;
height: 33px;
margin-bottom: 0;
margin-top: 0;
width: 100%;
position: relative;
}
#header-topnavwrapper {
background-color: #E7F5FE;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0;
width:950px;
}
#header-topnav {
display: table-cell;
height: 33px;
position: relative;
text-align: right;
vertical-align: middle;
width: 950px;
}
Problem: Place a blue bar across the top of the page; make the blue bar
expand to fill the width of the page. Within the blue bar place links and
make the links line up on the right edge of the content below. The width of
the content below is 950 pixels.
I will leave these pages for a while so late comers can see the problem.
Here is an example of the code with the text in the right position
vertically but not in line with the content below. I made the div the links
are in Red so you can see its alignment.
http://hps02.com/index1.php
Here is an example of the code with the text aligned with the content but
not positioned vertically within the Red line.
http://hps02.com/index2.php
Here is an example of the code with the links properly aligned.
http://hps02.com/index3.php
Click the Home link at the top of the page to cycle though all three
examples.
Merry Christmas,
Richard
-----Original Message-----
From: [email protected]
[mailto:[email protected]] On Behalf Of Chris Rockwell
Sent: Tuesday, December 17, 2013 1:55 PM
To: Richard Wendrock Forum
Cc: CSS-Discuss
Subject: Re: [css-d] Center a DIV on the Page and Center Text Vertically
within the DIV
Here are two options: http://codepen.io/anon/pen/kKAfG
If you want to use display: table-cell, you need to wrap it in a parent
element that has the auto margin applied.
If you want to skip display: table-cell, you can use line-height. The
line-height method seems error prone, should you change the height of the
container you'll also need to change the line-height. If you're using a
framework such as SASS it can handle this for you with variables.
I would personally use table-cell while I'm holding my breath for flexbox to
take over the world.
Hope this helps!
Chris
On Tue, Dec 17, 2013 at 1:39 PM, Richard Wendrock Forum <
[email protected]> wrote:
> Can you help me understand how to center text vertically within a DIV
> that is also center on the page?
>
>
>
> I am trying to position a DIV in the center of the page and then place
> text on the right side and centered vertically within the DIV.
>
>
>
> I can center the DIV with this definition. I color the background so
> you can see the DIV.
>
> #header-topnav {
>
> position: relative;
>
> background-color: red;
>
> height: 33px;
>
> width: 950px;
>
> margin-left:auto;
>
> margin-right:auto;
>
> text-align:right;
>
> }
>
>
>
> I can get the text to center vertically with this definition
>
> #header-topnav {
>
> position: relative;
>
> background-color: red;
>
> height: 33px;
>
> width: 950px;
>
> margin-left:auto;
>
> margin-right:auto;
>
> text-align:right;
>
> display:table-cell;
>
> vertical-align: middle;
>
> }
>
> But when I add the display:table-cell, it causes the DIV to left align.
>
>
>
> How can I vertically align the text and keep the DIV in the middle of
> the page?
>
>
>
> Here is the page www.HPS02.com/index.php
>
>
>
>
>
> ______________________________________________________________________
> css-discuss [[email protected]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
> http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
--
Chris Rockwell
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
