가운데 이미지 가운데에있는 이미지

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

의 텍스트를 마무리 : HTML에서

#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에 간단한 인 flexbox 팅겨을 사용할 수

#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 블록이 CSS에서 flex 속성을 사용하여 달성 할 수

<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

수직 중심으로 내용이 여전히 피타입니다.

#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>

이 하나 그것을하는 많은 방법 중 하나입니다. 이 제품은 트릭이나 해결 방법 또는 공급 업체별 지침을 사용하지 않습니다. 그것은 어디에서나 작동해야합니다.