Question

在我的asp.net mvc4视图中，我有一些嵌套的div来显示图像，下面是一个文本，如下所示：

<div id="Outer1" class="elementStatus">
    <div class="image"> <!-- THIS IS THE IMAGE -->
        <img id="MyImg1" src="@Url.Content("~/images/Image.gif")">
    </div>
    <div class="text"> <!-- THIS SHOWN THE TEXT UNDER IMAGE-->
        Statuts Text
    </div>
</div>

和css：

.elementStatus
{
    visibility: hidden;
}

.image{
    float: left;
    margin-top: 2px;
    padding-top: 1px; 
    padding-left: 10px;
    width: 35px;    
}
.text{
    float: left;
    margin-top: 1px;
    padding-left: 14px;
    padding-bottom: 2px;
    width: 35%;
    font-weight: bold;
    font-size: 1em;
}

我希望第一个div中的图像在放置它的div中水平和垂直居中。对于第二个div，我希望文本在div中水平和垂直居中。那怎么办呢？

请，不要downvote！

Answer 1

这是一个非常广泛的问题，但使用flexbox很容易解决（假设你支持更新的浏览器）。为了清楚起见，要删除供应商前缀，但你会想要这样的东西：

#Outer1 {
    display: box;
    box-align: center;
    box-orient: vertical;
    box-pack: center;
}

http://jsfiddle.net/VqwLH/

由于您已更新说您需要支持旧浏览器，我认为您可以将display: table-cell用于父容器：

#Outer1 {
    display: table-cell;
    height: 500px;
    width: 500px;
    border: 1px solid red;
    vertical-align: middle;
    text-align: center;
}

http://jsfiddle.net/VqwLH/1/

Answer 2

推荐背景图片：

.image {
    background-image: url('~/images/Image.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 35px 35px;
}

对于文字：

.text {
    text-align: center;
}

对于垂直文本对齐：

.text {
    line-height: 35px;
    height: 35px;
}

在div中居中图像和文本

2 个答案: