Center div in div horizontally

Tips and Tricks
1

I would like to achieve the following: I would like to place text over an image, in such a way that the text is centered on image both horizontally and vertically.

I tried this with Flexbox, but failed miserably. Who can help me? What is the easiest way to do this? Is the Flex module the right one?

2 
<div class="position-relative"><img class="img-fluid w-100" src="https://source.unsplash.com/WsEbnsnKbUE/800x600">
                    <div class="position-absolute top-50 start-50 translate-middle text-white text-center">
                        <h1>This is a heading</h1>
                        <p>This is a paragraph</p>
                    </div>
                </div>
3

Hello @richards
Thank you for your support. It works. But i have a new Problem:

The Div with the White Background and Text cointaining, should be the full-width. With the Class w-100 the Containers go wider than de outer Div, beacause there is a padding. How can i solve this, when i want the padding?

1 Like
4

Try something like this:

   <div class="position-absolute bottom-0 start-50 translate-middle-x bg-light text-center w-95 p-1 mb-3">

and add to your css:

.w-95 {
  width: 95%!important;
}
5

or use this which is it all merged together in one class:

html:


 <div class="col-md-4">
                <div class="position-relative"><img class="img-fluid w-100" src="https://source.unsplash.com/random/800x800">
                    <div class="alltogether">
                        <h1>Heading</h1>
                    </div>
                </div>
            </div>

css:

.alltogether {
  position: absolute !important;
  transform: translateX(-50%) ;
  left: 50%;
  bottom: 10px;
  background: white;
  width: 90%;
  text-align: center;
}

It will come out something like this: https://codepen.io/RichSin68/pen/rNzamjj

1 Like