1

まあ、私はそのための多くの解決策を読みましたが、どれも適切に機能しませんでした.

私はそれを水平方向の中央に揃えたくありません。ページのみに対して垂直方向の中央に揃える必要があります。また、明らかに、ページ サイズは動的であり、DIV の高さも動的です。

私はjsfiddleを作成しました -

http://jsfiddle.net/yesprasoon/mukKB/

そこに CSS が表示height: 200px;され、うまく機能します。しかし、div サイズが変更された場合はどうなるでしょうか。

4

2 に答える 2

1

純粋な CSS ソリューション。

作業中の JSbinを参照してください

HTML: (空のスパンを追加しただけで、コメントは重要です)

<span class="Centerer"></span><!--
--><div class="vertical-centre" id="loginForm">
    <form>
        <div id="welcometext2" style="text-align:center;"><b>Welcome to LC Inventory App</b>
        </div>
        <br />
        <input type="text" name="username" id="username" value="" placeholder="Username" />
        <input type="password" name="password" id="password" value="" placeholder="Password" />
        <input type="submit" value="Login" id="submitButton" />
    </form>
</div>

CSS:

*
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html, body
{
  height: 100%;
}
.vertical-centre
{
    padding: 0 15px;
    width: 100%;
    display: inline-block;
    vertical-align: middle;
}

.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
于 2013-09-22T20:26:08.950 に答える