div内のdivを背景画像で中心合わせする方法

bg-textを外側のdiv内に配置するだけで、すべてのデバイスの中央にh1タグがある背景に画像が表示されます。私はもともとマージントップが固定ピクセルだった場所にこれを持っていました。私はパーセンテージにする必要があるので、センターにとどまります。しかし、私がマージントップをパーセンテージで置き換えたとき、最小限のスクリーンとしてh1エレメントが上にスライドします。私はマージントップ：私のバックグラウンド画像の50％を常に維持したい。div内のdivを背景画像で中心合わせする方法

HTML

<div class= 'bg'> 
     <div class='bg-text'> 
     <h1>Text</h1> 
     </div> 
    </div>

CSS

。

.bg { 
    display: table; 
    width: 100%; 
    height: 50%; 
    background-image: image-url('pic.jpg'); 
    background-attachment: scroll; 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
} 

.bg-text{ 
    color: #fff; 
    text-align: center; 
    text-shadow: 1px 1px 12px rgba(0,0,0,0.5); 
    margin-top: 150px; 
} 

.bg-text h1{ 
    font-size: 50px; 
    font-weight: 700; 
}

出典

2016-12-30 brandoncodes

[縦DIVでDIVをセンタリング]の可能な重複（http://stackoverflow.com/questions/9307566/vertically-center-align-a-div-within-anothe-div?s = 6 | 2.3735）とSOを検索して見つかった他のホスト – Rob

[divのdivを水平方向に中央に配置]（http：// stackoverflow。com/questions/114543/horizontal-center-a-div-in-a-div） –

を中心に、内側のdivを合わせ

.bg { 
    display: flex; 
    align-items:center; 
    width: 100%; 
    height: 300px; 
    background-image: url('pic.jpg'); 
    background-attachment: scroll; 
    background-color: red; 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
} 

.bg-text{ 
    color: #fff; 
    text-align: center; 
    text-shadow: 1px 1px 12px rgba(0,0,0,0.5); 
} 

.bg-text h1{ 
    font-size: 50px; 
    font-weight: 700; 
}

のため使用するFlexプロパティがここに https://jsfiddle.net/pteus556/

を見ては、ブラウザでサポートします。

出典

2016-12-30 16:12:50

コードのみの回答はそれほど役に立ちません。あなたが何をしたのか、それがなぜ機能するのか、それにブラウザの制限があるのかなどを説明してください。 –

ok、私は私のansを編集します –

@cale_bありがとう！以前はalign-itemsを使ったことがありません。私はそれが要素を垂直方向に揃えていることがわかります。私はそれをどのように水平に整列させるでしょうか？ – brandoncodes

transform: translateY(-50%);を使用することである可能性行うための第二の方法。小さなデモのためにフィドルをチェックしてください：https://jsfiddle.net/y58hu6tv/2/

.bg { 
    width: 100%; 
    height: 500px; 
    background-color: rgba(0, 0, 0, .7); 
} 

.bg-text { 
    position: relative; 
    top: 50%; 
    margin: 0 auto; 
    transform: translateY(-50%); 
    text-align: center; 
    background-color: rgba(255, 255, 255, .7); 
}

また、この手法ではブラウザのサポートがそうですが。

参考：http://caniuse.com/#feat=transforms2d

出典

2016-12-30 16:55:04

fixed dimensionsと<div>を作成し、あなたの背景を追加します。
<div>のサイズをに調整します。
<div>

ポジションテキスト<div>内側とそれにposition:absoluteを与えること内のテキストを入れて - 親との関係で
がtransformプロパティを使用してだけでなく、top/left/right/bottom

.mycontent { 
 
    width: 100vw; 
 
    max-width: 100%; 
 
} 
 
.mytext { 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    position: absolute; 
 
    background: rgba(255, 255, 255, .6); 
 
    border: 1px solid #777; 
 
    padding: .2em; 
 
    color: #000; 
 
} 
 
.topcontent { 
 
    height: 100vh; 
 
    width: 2560px; 
 
    max-width: 100%; 
 
    background: url(http://supersocl.com/wp-content/uploads/2016/09/2560X1440-Wallpaper-Elegant-6G0.jpg); 
 
    background-size: cover; 
 
} 
 
.othercontent { 
 
    background: #010101; 
 
    padding: 30px; 
 
} 
 
body { 
 
    max-width: 100%; 
 
    padding: 0; 
 
    margin: 0 auto; 
 
    color: #999; 
 
} 
 
p { 
 
    margin: 0 auto; 
 
    padding: 20px; 
 
    text-align: justify; 
 
    text-justify: inter-word; 
 
}

<body> 
 
    <div class="mycontent"> 
 
    <div class="topcontent"> 
 
     <span class="mytext">your text goes here</span> 
 
    </div> 
 
    <div class="othercontent"> 
 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia 
 
     voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p> 
 

 
     <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem 
 
     ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p> 
 

 
     <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> 
 

 
     <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt 
 
     mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas 
 
     assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et vo</p> 
 
    </div> 
 
    </div> 
 
</body>

出典

2016-12-30 17:26:05

div内のdivを背景画像で中心合わせする方法

答えて

関連する問題