Question

我正在尝试在页面的中间/中间部分放置一个标签，并在页面的底部/中间部分放置按钮但是很难。 {/ 3}}为此

以下是HTML代码段

<div style="text-align:center;vertical-align:middle;">
    <label id="lblStatus">Please wait...</label>
</div>
<button id="btnClose" value="Close" onclick="window.close();" style="position:absolute; bottom:0; text-align:center; width:80px"></button>

Answer 1

这应该有效：

<div style="text-align:center;vertical-align:middle;">
    <label id="lblStatus" style="position: absolute; top: 50%;">Please wait...</label>
</div>
<div style="text-align: center;">
    <button id="btnClose" value="Close" style="position:absolute; bottom:0; text-align:center; width:80px">A button</button>
</div>

这里是jsfiddle。

Answer 2

HTML：

<div id="labelHolder">
    <label id="lblStatus">Please wait...</label>
</div>

<button id="btnClose" value="Close" onclick="window.close();"></button>

CSS：

#labelHolder {
    text-align:center;
    vertical-align:middle;
}

#labelHolder #lblStatus {
    margin: auto;
    position: absolute;
    top: 50%;
    left: 0;
    bottom: 0;
    right: 0;
}

#btnClose {
    position:absolute;
    bottom:0;
    left:50%;
    margin-left:-40px;
    text-align:center;
    width:80px
}

jsfiddle：http://jsfiddle.net/98vLu/

Answer 3

<div style="text-align:center; position: absolute;top:50%;width:100%;">
    <label id="lblStatus">
        Please wait...
    </label>
</div>

<div style='text-align:center;position:absolute;bottom:0; width:100%;'>
<button id="btnClose" value="Close" onclick="window.close();" style=" bottom:0; text-align:center; width:80px"></button>

jsfiddle

添加位置：绝对;在尝试定位时给予了很大的灵活性。

Answer 4

对于垂直居中对齐，您可以使用display: table-cell更好地控制高度。

例如：http://jsfiddle.net/Ljht7/8/

Answer 5

这是......简单，标准和干净......没有脚本，没有固定的尺寸......

尝试这两个...这是一个垂直/水平居中元素的标准解决方案...你可以用它来“请等待”我们一个相对文本居中的div为按钮...祝你好运

<div style="
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
text-align: center;
overflow: hidden;
white-space: nowrap;">
    <div style="
        position: relative;
        display: inline-block;
        height: 100%;
        vertical-align: middle;"></div>
    <div style="
        position: relative;
        display: inline-block;
        vertical-align: middle;">
THIS IS CENTERED ONLY WITH CSS<br/>
parent's position: absolute; is only an example, it can be relative<br/>
Marcelo Villarreal :D</div>
</div>

对齐页面中间/中心的文本和底部/中心的按钮

5 个答案: