-1

在我的 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 内水平和垂直居中。那么该怎么做呢？

请不要投反对票！

4

2 回答 2

0

这是一个相当广泛的问题，但使用 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/

于 2013-10-03T19:40:34.973 回答
0

推荐一张背景图：

.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;
}
于 2013-10-03T19:49:16.137 回答