圖像中間的中心文字

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

您可以在#ImageMain上使用一個簡單的flexbox調整來進行垂直居中，並在h1進行text-align以進行水平居中（placehold.it圖像用作演示）：

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

將文本包裝在div塊中

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

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

這只是許多方法之一。 本指南不使用任何技巧或變通辦法或供應商特定的說明。 它應該隨處可用。

Answer 4

這可以通過在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>