Question

我想垂直居中对齐我的div与＃34; centeredContent＆＃34;。我在Kendo Mobile标签栏内。也许这就是为什么似乎没有任何效果。我可能需要做一些特定的事情。我尝试了一个实际工作的特定解决方案，图像居中，但它下面的无序列表实际上走到了页面的右侧...如果我们可以使无序列表不这样做那么那将是高手。以下是图像居中的原因：

#outer {
            display: -webkit-box;
            -webkit-box-pack: center;
            -webkit-box-align: center;
        }

让data-stretch =＆＃34; true＆＃34;整个标签视图的属性。

这是我现在的代码。在我有10个声望之前我无法发布图像，但基本上centredContent div似乎距离顶部大约20px，仍然太高而不在中心：

<div data-role="view" data-title="Log In" data-layout="main" data-model="APP.models.home" data-show="showLogin">
    <h1 data-bind="html: title"></h1>
    <div class="centeredContent">
        <div>
        <img class="logo1"/><br/>
        <ul class="listView" data-role="listview" data-style="inset">
            <li>
                <label class="question">Username
                    <input type="text" value="" id="Username" />
                </label>
            </li>
            <li>
                <label class="question">Password
                    <input type="password" value="" id="Password" />
                </label>
            </li>
            <li>
                <label>
                    <button onclick="signIn()" type="button">Submit</button>
                </label>
            </li>
        </ul> 
        </div>
    </div>


    <div data-role="modalview" id="modalviewError" style="width: 90%;">
        <ul data-role="listview" data-style="inset">
            <li>
                <label type="text" value="" id="errMessage"></label>
            </li>
            <li>
                <button onclick="hidePopup()" type="button">OK</button>
            </li>
        </ul>
    </div>




</div>

的CSS：

.centeredContent {

        position:absolute;
        height: 100%;
        width:100%;
        top:50%;
    }

    .logo1 {
        background-image: url(../styles/images/VCareInternationalLimited.png);
        background-repeat: no-repeat;
        margin-left: auto;
        margin-right: auto;
        width:254px;
        height:129px;
        text-align: center;
        display:block;
        left:0;
        background-size: 254px 129px;
        margin: auto;
        border-radius:10px;
    }

.listView {
    width:254px;
    border-radius:10px;
    margin-left :auto;
    margin-right :auto;
}

Answer 1

使用#outer和.centeredContent，有效的方法是使用以下代码：

#outer {
    display: table;
}
.centeredContent {
    display: table-cell;
    vertical-align: middle;
    display: inline-block /* Add this for IE support */
}

如果这不起作用，你可能不得不摆弄位置（尝试相对和绝对）。您还可以查看http://www.vanseodesign.com/css/vertical-centering/上的其他一些选项。

中心 - 垂直对齐div

1 个答案: