web-dev-qa-db-ja.com

divを親divに垂直および水平に整列します

私はWeb開発業界に新しく、親divの子divを垂直および水平に揃えるのに苦労しています。私は、全幅の画像でホームページを構築しようとしていますが、その画像の真ん中にスローガンがあります。これは私の最初の試みです。

HTML：

<div class="img">
   <div class="text">Here is my slogan</div>
</div>

CSS：

.img {
    margin: 0px;
    padding: 0px;
    border-width: 0px;
    background-image: url("picture-1.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% auto;
    background-color: black;
    min-height: 1024px;
}
.text {
text-align: center;
vertical-align: middle;
height: 300px;
padding: 175px;

}

私はこれがnoobishコードだと確信していますが、私はこの業界の新参者です。私を手伝ってくれますか？

更新：私が意図したものの写真を作りました： enter image description here

htmlweb-developmentcss
3
Jacob T

これを実現するには多くの方法がありますが、テーブルセルが垂直方向の配置をサポートしているため、div表示をテーブルセルに変更するのが最も便利です。

サンプルコードの調整として...

HTML

<div class="img">
   <div class="text">Here is my slogan</div>
</div>

CSS

.img {
    margin: 0px;
    padding: 0px;
    border-width: 0px;
    background-image: url("picture-1.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% auto;
    background-color: black;
    min-height: 1024px;
    display: table;
    width: 100%;
}
.text {
    text-align: center;
    height: 300px;
    display: table-cell;
    vertical-align: middle;
}

display: tableクラスに.imgが追加され、display: table-cellクラスにvertical-align: middleおよび.textが追加されていることに注意してください。

これは https://jsfiddle.net/wLm5zjwx/ でテストおよび保存されています

2
Chris Rutherfurd

CSS Flexboxを試してください：display: flex; align-items: center;

1
Denis