イメージの中央にあるテキスト

Question

イメージの中央にテキストを正しく配置する方法を理解しようとしています。私は中心に置くことができましたが、イメージの一番上にあり、中には死んでいませんでした。

#ImageMain { 
 
    background-image: url(C:/Users/Gabriel/Downloads/bg.jpg); 
 
    width: 80%; 
 
    height: 700px; 
 
    position: relative; 
 
    display: block; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    opacity: 0.8; 
 
} 
 

 
#TextMain h1 { 
 
    font-size: 100px; 
 
    font-family: "PT Sans", sans-serif; 
 
}

<div id="ImageMain"> 
 
    <div id="TextMain"> 
 

 
    <h1>Shop our Whole Selection</h1> 
 

 
    </div> 
 
</div>

Answer 1

のdivブロック内のテキストを折り返す。これは、CSSでflexプロパティを使用して達成することができます。

#ImageMain { 
 
background:#eee; 
 
width: 80%; 
 
height: 700px; 
 
position: relative; 
 
display:flex; 
 
align-items:center; 
 
justify-content:center; 
 
} 
 

 
#TextMain h1 { 
 
font-size: 100px; 
 
font-family: "PT Sans", sans-serif; 
 
text-align:center; 
 
}

<div id="ImageMain"> 
 
<div id="TextMain"> 
 

 
<h1>Shop our Whole Selection</h1> 
 

 
</div> 
 
</div>

Answer 2

あなたは（placehold.itイメージをデモとして使用された）垂直、水平センタリングのためh1に& text-alignをセンタリングするため#ImageMainに簡単なフレキシボックスの微調整を使用することができます。

#ImageMain { 
 
    background-image: url(https://placehold.it/500x500); 
 
    width: 80%; 
 
    height: 700px; 
 
    position: relative; 
 
    /* new */ 
 
    display: flex; 
 
    align-items: center; 
 
    /* end new */ 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    opacity: 0.8; 
 
} 
 

 
#TextMain h1 { 
 
    font-size: 100px; 
 
    font-family: "PT Sans", sans-serif; 
 
    /* new */ 
 
    text-align: center; 
 
}

<div id="ImageMain"> 
 
    <div id="TextMain"> 
 
    <h1>Shop our Whole Selection</h1> 
 
    </div> 
 
</div>

Answer 3

が

<div name="text_main"><p>text</p></div> 


    //apply css properties... 
//adjust position by applying margin-top and margin-bottom 
// then position the element by 
    float:center //and try to make positon:fixed 

Answer 4

縦にHTMLでコンテンツを中心とすることは、まだピタパンです。

#TextMain { 
 
    border: solid 1px red; 
 
    height: 20em; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
h1 { 
 
    border: solid 1px blue; 
 
}

<div id="ImageMain"> 
 
<div id="TextMain"> 
 

 
<h1>Shop our Whole Selection</h1> 
 

 
</div> 
 
</div>

これはほんの一、それを行うための多くの方法のです。これはどんなトリックや回避策やベンダー固有の指示も使用しません。それはどこでもうまくいくはずです。