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/
