3

我有一个包含一些内容的 div，在本例中是 2 个按钮和一个段落。我想通过更改其 CSS 来垂直和水平对齐该 div 内的所有元素和内容。我怎样才能做到这一点？

<style>
  .middle {
    What to type in here?
  }
</style>

<div class="middle">
  <p>Hello</p>
  <br />
  <input type="button" value="Button 1">
  <br />
  <input type="button" value="Button 2">
</div>
4

2 回答 2

1

将您的 html 更改为：

<div class="middle">
    <div id='mydiv'>
       <p>Hello</p>
       <input type="button" value="Button 1" />
       <input type="button" value="Button 2" />
    </div>
</div>

和你的 CSS

.middle
{
padding: 0;
}

#mydiv
{
display: table;
margin: 0 auto;
}

#mydiv *
{
display: block;
}

input[type='button']
{
margin: 0;
}

工作小提琴：http: //jsfiddle.net/n6522/1/

PS。边框和宽度只是为了给你一个想法。您不需要添加第一个块。

于 2013-07-01T15:33:15.387 回答
0

检查这种风格：

/* stretch them to window's height */
html, body {
    height:100%;
}

/* normalize them from default 8px to zero */
html, body, div, p {
    margin:0;
    padding:0;
}

/* vertical align */
 body {
    display:table;
    width:100%;
    overflow:auto;
}
.middle {
    display:table-cell;
    vertical-align:middle;
}

/* horizontal align */
.middle {
    text-align:center;
}

jsfiddle #1

或者，您可以将所有 html 代码放入某个容器中div并对其进行样式化而不是body标记：

jsfiddle #2

为了完整起见，.middle分区的内容居中并且高度.middle也取决于其内部内容的最简单样式可以使用相等的顶部和底部填充，如下所示：

.middle {
    padding:5em 0;
    text-align:center;
}

jsfiddle #3

于 2013-07-01T17:07:58.450 回答