-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 の水平方向と垂直方向の中央に配置したいと考えています。2 番目の 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 に答える