SaeedP Member 15 Points 134 Posts How to make my heading horizontal and vertical align

Hello,

Please look at this code:

<div class="container-fluid">
    
    <div class="row">
        <div class="col">

            <img class="img-fluid" src="image/bgImage5.jpg" style="width: 100%; height:auto;z-index:1; position: relative;">
            <div class="container "  style="z-index:2; position:absolute;  ">
                
                <h1 >  ghjjkhkjhlhhlhkljh</h1>
               
            </div>

        </div>

    </div>

</div

How can I make my heading horizontal and vertical-align responsively?

thanks,
Saeed

1 Like

If you are just wanting to both horizontally and vertically center the h1 element, then the following should be added to the h1 element.

class="row h-100 justify-content-center align-items-center"

Then, the parent div element would use:

<div class="container h-100">
1 Like

Thank you randell.
But I want the h1 element stay on the center of the image. and consider the div container position is absolute. This make my work hard!

Do you have any opinion about it?

…it’s absolutely positioned! Try:

div.container {
left: 50%;
top: 50%;
transform: translate (-50%, -50%);
}

And It should also be responsive.
If none of it’s ancestors has position , relative. It will positioned with respect to the document element, html.

Thanks for your help samolex,

This code isn’t working. But when I eliminate the third part (transform)

It works well! But the left part:

left: 50%;

isn’t work responsively!

here came the whole code:

 <div class="row">
        <div class="col" style=" padding: 0; width: 100%;">

            <img class="img-fluid" src="image/bgImage5.jpg" style="width: 100%; height:auto;z-index:1; position: relative;">
            <div class="container"  style="z-index:2; position: absolute;  padding: 0; width: 100%; left: 50%; top: 50%; ">
                
                    

                <h1 >hgjhkjh;klj;lkj;l</h1>

               

            </div>

        </div>

    </div>

</div>

    
 
           
           

Do you have any comments or ideas?

thanks,

Maybe you didn’t get me quite well… I made some work-arounds on the code though - but still the same idea. i made the outer div relatively positioned(would be positioned on the center of the page if i didn’t - with respect to the html element or some other parent with position, relative) and made the inner absolutely positioned…

 <div class="row">
 	<div class="col" style=" padding: 0; position: relative;  width: 100%;">
 		<div class="container" style="z-index:2; position: absolute;  padding: 0; width: 80%; left: 50%; top: 50%; background-color: red; transform: translate(-50%, -50%) ">

 			<h1 style='color: white; text-align: center;'>hgjhkjh;klj;lkj;l</h1>

 		</div>
 		<img class="img-fluid" src="https://content.fortune.com/wp-content/uploads/2017/01/google.jpeg" style="width: 100%; height:auto;z-index:1; position: relative;">

 	</div>

 </div>

 </div>

You might have well used the flex-box approach as @RandellDawson has said - you might just need to used the img as a background instead - that will in fact save some code!

Thank you samolex. Your answer work well now.