Question

This question already has answers here:

Possible Duplicate:
css vertical centering

我只是忘记,把事情放在特别安全局是多么困难。

在所附的法典中,我试图将图像和标题表进行纵向统一,或者如果更容易的话,则可能把整个“内分部分”四字连接起来。在图像与左侧相配后剩余的空间内,还设法使地标平。

<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>

几乎在那里。我不得不放弃和使用一张桌子,这太容易。

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.

感谢

<!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: 100%; 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>

Answer 1

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: 添加浮标,因此所有权集中在剩余空间,而不是整块块。

最新版本:

<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 :)

Answer 2

为你们想要集中的东西做一个包裹。

.wrapper {
  width:960px;
  margin-left:auto;
  margin-right:auto
}

Answer 3

请检查以下员额:

CSS: Standard (dynamic) way to centralize an elements in the y-axis

我的回答中提到了一些可能有用的问题,而且有几个人对使用特别安全局问题的x/ycentering提出了可能的解决办法。

友情链接