HTML居中inline-block的

我試圖居中文本是在圖像的頂部，但似乎無論什麼我也不會居中HTML居中inline-block的

我也用保證金0自動嘗試但沒」也沒有幫助。

#search_box { 
 
    \t width: 100%; 
 
    \t height: 450px; 
 
    \t position: relative; 
 
    \t text-align: center; 
 
    } 
 
    
 
    #search_box h1 { 
 
    \t display: inline-block; 
 
    \t width: 50%; 
 
    \t top: 180px; 
 
    \t color: white; 
 
    \t background-color: red; 
 
    \t position: absolute; 
 
    }

<div id="search_box"> 
 
    \t \t \t <img src="images/background_search.jpg" alt="search_box_picture"/> 
 
    \t \t \t <h1>SOME TEXT</h1> 
 
    \t \t </div>

來源

2016-11-09 Tomislav Nikolić

這樣嗎？

#search_box { 
 
    width: 100%; 
 
    height: 450px; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 

 
#search_box h1 { 
 
    display: block; 
 
    width: 50%; 
 
    top: 180px; 
 
    color: white; 
 
    background-color: red; 
 
    margin: auto; 
 

 

 
}

<div id="search_box"> 
 
      <h1>SOME TEXT</h1> 
 
      <img src="images/background_search.jpg" alt="search_box_picture"/> 
 
      
 
     </div>

來源

2016-11-09 03:38:48 GvM

那麼這個問題是不是在圖像本身的頂部 –

我編輯的代碼。如果你想把文本放在圖像的頂部，只需將文本先放在你的html文件之前，我想他想要圖像背後的圖像 – GvM

。是對的嗎？ –

你想是這樣的： -

.image { 
 
    position:relative; 
 
    text-align:center; 
 
    
 
} 
 

 
.text { 
 
    left: 0; 
 
    position:absolute; 
 
    top: 30px; 
 
    width: 100%; 
 
    
 
}

<div class="image"> 
 
    <img src="http://davidrhysthomas.co.uk/img/dexter.png" /> 
 
    <div class="text"> 
 
     Text of variable length 
 
    </div> 
 
</div>

來源

2016-11-09 03:51:30

#search_box { 
 
    \t width: 100%; 
 
    \t height: 450px; 
 
    \t position: relative; 
 
    \t text-align: center; 
 
    } 
 
    
 
    #search_box h1 { 
 
    \t display: inline-block; 
 
    \t width: 50%; 
 
    \t top: 180px; 
 
    \t color: white; 
 
    \t background-color: red; 
 
    \t position: absolute; 
 
     left:0; 
 
     right:0; 
 
     margin:0 auto; 
 
    }

<div id="search_box"> 
 
    \t \t \t <img src="images/background_search.jpg" alt="search_box_picture"/> 
 
    \t \t \t <h1>SOME TEXT</h1> 
 
    \t \t </div>

根據父div，您的圖像位置爲中心。 H1標籤不居中對齊。你必須留下絕對標籤的左側空間。

#search_box { 
 
    \t width: 100%; 
 
    \t height: 450px; 
 
    \t position: relative; 
 
    \t text-align: center; 
 
    } 
 
    
 
    #search_box h1 { 
 
    \t display: inline-block; 
 
    \t width: 50%; 
 
    \t top: 180px; 
 
    \t color: white; 
 
    \t background-color: red; 
 
    \t position: absolute; 
 
     left:25%; 
 
    }

<div id="search_box"> 
 
    \t \t \t <img src="images/background_search.jpg" alt="search_box_picture"/> 
 
    \t \t \t <h1>SOME TEXT</h1> 
 
    \t </div>

來源

2016-11-09 03:52:48 kapil

#search_box { 
 
    \t width: 100%; 
 
    \t height: 450px; 
 
    \t position: relative; 
 
    \t text-align: center; 
 
    } 
 
    
 
    #search_box h1 { 
 
display: block; 
 
margin: 0 auto; 
 
width: 50%; 
 
color: white; 
 
background-color: red; 
 
    
 
}

<div id="search_box"> 
 
    \t \t \t <img src="images/background_search.jpg" alt="search_box_picture"/> 
 
    \t \t \t <h1>SOME TEXT</h1> 
 
    \t \t </div>

你想是這樣的？

來源

2016-11-09 04:20:16 user6144292

HTML居中inline-block的

回答

相關問題