Question

我似乎无法将div标签放在section标签中。我可以让它从左到右居中，但不能在截面标签的中心顶部和底部。如果我给一个margin-top：xxpx然后它会移动section标签并暴露它（不好！）

这是我的css

body 
{
background-color: yellow;
margin: 0;
}

header > * {
margin: 0;
float: left;
}

header
{
background-color: white ;
width: 100%;
height: 40px;
}

/*header > input {
margin: 10px 20px 0px 10px;
}*/

#toptext
{
margin: 10px 5px 0px 10px;
width: 245px;
}

article > * {
margin: 0;
}

article
{
background-color: red;
}

#search {
background-color: #a6dbed;
height: 500px;
}

#middlesearch {
background-color: grey;
width: 700px;
margin: 0 auto;   
}

#mostdesired 
{
background-color: #c7d1d6;
height: 200px;
}

section h2 {
margin:0;
}

.site-title {
color: #c8c8c8;
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 1.3em;
margin: 0px 20px 0px 50px;
margin-top: 7px;
}

.site-title a, .site-title a:hover, .site-title a:active {
background: none;
color: #c8c8c8;
outline: none;
text-decoration: none;
}

这是我的HTML

<body>
    <header>
        <p class="site-title">@Html.ActionLink("Site", "Index", "Home")</p>
        <input id="toptext" type="text" />
    </header>
    <article>
        <section id="search">
            <div id="middlesearch">
                <h2>Search Here</h2>@RenderBody()
            </div>
        </section>
        <section id="mostdesired" ><h2>This is the most section</h2></section>
    </article>
</body>

Answer 1

与CSS垂直对齐是非常棘手的。

将CSS更改为

#search {
    position: relative;
    background-color: #a6dbed;
    height: 500px;
}

#middlesearch {
    position: absolute;
    background-color: grey;
    width: 700px;

    top: 50%;
    left: 50%;
    margin-left: -350px; /* half the width */
}

并添加一行JQuery以使div正确居中

$('#middlesearch').css("margin-top",-$('#middlesearch').height()/2)

如果您决定明确指定div的高度，则可以避免此行，此时您可以简单地在CSS中定义上边距。

这避免了必须使用表格。

Answer 2

标题的CSS声明未在第20行关闭

Answer 3

http://www.vanseodesign.com/css/vertical-centering/

不幸的是，CSS并不容易，但它是可能的。由于div高度是动态的，我建议使用CSS表方法。是的，完全是黑客攻击，但确实有效。

Answer 4

您必须为块级元素做一些工作，请参阅这些示例

http://phrogz.net/CSS/vertical-align/ http://www.vanseodesign.com/css/vertical-centering/

Answer 5

#middlesearch {
    display:inline-block;
    line-height:500px;
    vertical-align:middle;
}

尝试将div标签置于section标签中

5 个答案: