3

の画像を適切に（垂直方向、水平方向に）中央に配置する方法は？

<div class="category-info">
    <div class="image">
            <h1>Title</h1>
            <img src="image.jpg" />
        </div>
    </div>

CSS

.category-info {
    text-align: center;
    height: 200px;
    width: 770px;
    overflow: auto;
    margin-bottom: 20px;
}

画像は幅 770 ピクセル、高さ 200 ピクセルです。私は次に何をすべきかわかりません。いくつかのことを試しましたが、成功しませんでした。

テスト画像

4

4 に答える 4

5

どうぞ: http://jsfiddle.net/QjLuP/4/

CSS:

.image{
    position: relative;
    background: green; /* IE */
}
.image h1{
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    font-size: 20px;
    width: 100%;
    height: 26px;
    padding: 0;
    margin: 0;
    margin-top: -13px; /* 1/2 height */
    text-align: center;
    background: red;
    background: rgba(170, 0, 0, 0.8); /* CSS3 */
}
.image img{
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:green
}
于 2013-01-31T20:37:36.060 に答える
1

クラスに相対的な位置をスロー.imageし、画像要素の幅と高さを設定しました（そのようにして、ロード時にサイズが変更されません）。テーブルを元に戻しh1、200px の行の高さを追加しました。それが唯一の欠点です..の行の高さを手動で設定する必要がありますh1.

HTML:

<div class="category-info">
    <div class="image">
         <h1>Title</h1>
        <img src="http://placekitten.com/770/200" />
    </div>
</div>

CSS:

.category-info {
    text-align: center;
    margin-bottom: 20px;
}

.image{
    position:relative;
}

.image img{
    width:770px;
    height:200px;
}

.image h1{
    position:absolute;
    width:100%;
    color:white;
    line-height:200px;
    margin:0;
}

JSFiddle: http://jsfiddle.net/5wGwL/2/

于 2013-01-31T20:46:34.820 に答える
0

これを試しましたか？

h1 { text-align:center; }
于 2013-01-31T20:33:21.653 に答える
0

html

<h1 style="background-image:url(your php source.img)">Title</h1>

css:

h1 {
    height: 200px;
    width: 770px;
    margin-bottom: 20px;
    text-align:center;
    vertical-align:middle;
    line-height:200px;
    background:transparent no-repeat scroll 50% 50%;
   }

何もありません

于 2013-01-31T20:39:51.480 に答える