Question

可能重复：
css vertical centering

我忘记了将内容放在CSS中是多么困难。

在附加的代码中，我试图垂直对齐Image和TitleText，或者可能是整个“innersection”div，如果这更容易。还尝试在图像向左对齐后剩余的剩余空间内水平对齐TitleText。

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

几乎就在那里。我不能只是放弃并使用一张桌子，本来就太容易了。

目前下面的代码部分有效，但...... 当我为TitleText使用div时，它会水平居中，但与图像不完全垂直。改为跨度而不是（没有浮动：左）和垂直对齐是正确的，只是因为跨度不跨越标题的整个宽度，文本不再居中。

如此接近但到目前为止！任何人都可以看到如何使这个工作。

谢谢，

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

广告垂直居中：您没有指定居中关系..您希望再次居中？页？或者只是父div？无论如何..有很多场景，所以检查这些文章：
In the woods
basics {at jakpsatweb}

编辑：将浮点数添加到img，因此标题以剩余空间为中心，而不是整个块

最新版本：

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

由于标题通常是固定的，所以我这样做了。您可以将固定高度设置为标题部分，并将其位置设置为相对。然后，内部结构与图像一样高（在css中设置）。文本的垂直居中是通过使用位置绝对技术完成的，边缘顶部设置为50％（因此标题块的顶部边缘将居中）。现在你只需要它的高度的一半，使其居中关系与父母div（innersection）。
呃..不是一个简单的解释我猜..代码应该更好地解释它：）

Answer 2

为你想要居中的任何东西制作一个包装。

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

Answer 3

请查看以下帖子：

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

我的回答中有一些参考资料可能有用，有些人使用CSS问题发布了x / y居中的可能解决方案。

css集中项目

3 个答案: