HTML центрирование встроенный блок

Question

Я пытаюсь центрировать текст, который находится на верхней части изображения, но это не кажется, независимо от того, что я делаю это не центр его

Я также попытался с помощью Маржа 0 авто, но это Didn» t помочь.

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

Answer 1

как это?

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

Answer 2

Вы хотите что-то вроде этого: -

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

Answer 3

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

Answer 4

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

вы хотите что-то вроде этого?