css centering items [duplicate]
Possible Duplicate:
css vertical centering
I'd forgotten just how difficult it is to center things in CSS.
In the attached code I am trying to vertically align both the Image and the TitleText or maybe the whole "innersection" div if that is easier. Also trying to horizontally align the TitleText within the remaining space left after the image has been aligned to the left.
<html>
<head>
<style>*{margin: 0; padding: 0;}</style>
</head>
<body>
<div id="header" style="position: absolute; top: 0px; height: 8em; width: 100%; background: grey;">
<div id="titlesection" style="height: 6em; background: green;">
<div id="innersection" style="margin-top: auto; margin-bottom: auto; background: yellow;">
<iimg src="images/burgee.jpg" style="vertical-align: center;">
<span style="width: 100%; margin:0 auto; text-align: center; font-size: xx-large; background: teal;">TitleText</span>
</div>
</div>
<div id="menu" style="position: absolute; bottom : 0px; height: 2em; width: 100%; background: lightblue;">
menu goes here
</div>
</div>
</body>
</html>
Almost there. I couldn't just give up and use a table instead, would have been too easy.
Currently have the code below which partly works but... When I use a div for the TitleText it centers horizontally but is not exactly vertically inline with the image. Change to a span instead (without float: left) and vertical alignment is correct, just that then because a span doesn't span the whole width of the header the text is no longer centered.
So near but so far! Can anyone see how to get this working.
Thanks,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style>
.VCentOuter {
top: 0; left: 0; width: 100%; height: 10开发者_JAVA技巧0%; position: absolute; display: table
}
.VCentInner {
display: table-cell; vertical-align: middle
}
#header{
height: 17em;
width: 100%;
}
#header img {
margin: 1em;
}
#title{
width: 100%;
text-align: center;
color: Red;
font: bold italic xx-large "Century Gothic", "sans-serif";
}
</style>
</head>
<body>
<div id="header">
<div class="VCentOuter" style="height: 15em; background: green;">
<div class="VCentInner" style="background: blue;">
<img src="images/burgee.jpg" style="vertical-align: middle; float: left;"/>
<div id="title" style="width: 100%; background: pink;">TitleText</div>
<!--
<img src="images/burgee.jpg" style="vertical-align: middle"/>
<span id="title" style="width: 100%; background: pink;">TitleText</span>
-->
</div>
</div>
</div>
</body>
</html>
Ad vertical centering: You don't specify the centering relation.. what do you want to center agains? Page? Or just parent div? Anyway.. there are many scenarios, so check these articles:
In the woods
basics {at jakpsatweb}
edit: added float to img, so title is centered in remaining space, not whole block
latest version:
<html>
<head>
<style>
body {margin:0;}
#header {height:200px; background-color:#EEE;}
#titlesection {height:170px; background-color:#DDD; position:relative;}
#innersection {height:60px; background-color:#CCC; position:absolute; top:50%; margin-top:-30px; width:100%;}
#innersection img {float:left; width:200px; height:60px;}
#innersection h1 {margin:0; font-size:20px; line-height:60px; text-align:center;}
#menu {height:30px; margin:0; padding:0;}
#menu li {float:left; display:block; margin-right:10px;}
</style>
</head>
<body>
<div id="header" >
<div id="titlesection" >
<div id="innersection" >
<img src="images/burgee.jpg">
<h1>Title text</h1>
</div>
</div>
<ul id="menu">
<li>Menu item</li>
<li>Second menu item</li>
</ul>
</div>
</body>
</html>
As header is usually fixed, I went this way. You can set fixed height to title section and set its position to relative. Then the innersection is as high as image is (manyally set in css). Vertical centering of text is done by using position absolute technique with margin-top set to 50% (so top edge of heading's block is going to be centered).. now you just need it half its height up, to make it centered in relation with parent div (innersection).
Ugh.. not a simple explanation I guess.. code should explain it better :)
Make a wrapper for whatever you want to center.
.wrapper {
width:960px;
margin-left:auto;
margin-right:auto
}
Please check the following post:
CSS: Standard (dynamic) way to centralize an element in the y-axis
There are references in my answer that may be useful, and several people posted possible solutions to the x/y-centering using CSS problem.
加载中,请稍侯......
精彩评论