'how to get heading,subheading,search bar over image at centre

How can I place heading , subheading and search bar at the center of the image

.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/assets/hero.jpg");
  height: 350px;
  background-position: center;
  background-size: cover;
}
<h1>Welcome to QTrip</h1>
<h2>Explore the world with fantastic places to venture around</h2>
</div>
htmlcsstwitter-bootstrap


Solution 1:[1]

body{
                margin: 0;
                padding: 0;
            }
            .banner{
                background-image: url(https://i.picsum.photos/id/104/1080/1080.jpg?hmac=Brz_-6-VYsQ9KEX9MY1WI7kPaC0MO5piVgpn3vbWD34);
                background-color: #cccccc;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                height: 500px;
            }
            .banner_text{
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height: 100%;
            }
            h1{
                margin: 0;
                font-size: 48px;
            }
            p{
                font-size: 18px;
                margin-top: 30px;
            }
            .search_outer{
                margin-top: 10px;
            }
<html>
    <body>
        <div class="banner">
            <div class="banner_text">
                <h1>Welcome to Qtrip</h1>
                <p>Explore the world with fantastic places to venture around</p>
                <div class="search_outer">
                    <label>Search</label>
                    <input type="text">
                </div>
            </div>
        </div>
    </body>
</html>

You can achieve this result with the help of the display flex property.

Solution 2:[2]

This question is already answered. Duplicate to this

Copied to mr.lazy

You can use display: flex

.container{
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
<div class="container" style="margin-top: 8%;">
       <div class="col-md-6 col-md-offset-3">     
        <div class="row">
              <div id="logo" class="text-center">

              <h1>Movie</h1>
       
              </div>
           <form role="form" id="form-buscar">
             <div class="form-group">
               <div class="input-group">
                 <input id="1" class="form-control" type="text" name="search" placeholder="Search..." required/>
                 <span class="input-group-btn">
                   <button type="button" class="btn btn-outline-primary">search</button>
                   <i class="glyphicon glyphicon-search" aria-hidden="true"></i>
                 </span>
               </div>
             </div>
          </form>
         </div>            
       </div>
       <p>movie!</p>
    </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ronak Panchal
Solution 2 husnain zafar

Related Questions