Center Heading on Carosel

Webdesign Help
1

Hi All,

I want to display some text (Heading 1) on near the center line of the Carosel (over the top of the carosel image being displayed). I would like to line the align the text with the carosel control arrows ‘<’ & ‘>’ .
At the moment I am using the position : relative command and using the top : -115px to move the header text over the top of the image… this kind of works, but as the screen size changes the text doesnt stay aligned with the ‘<’ & ‘>’ carosel arrows. Is there a way that I can allign the text better in a dynamic way with the carosel control arrows??

Screenshot 2020-12-31 104501

Many thanks

Michael

2

Looks Like I’ve fixed it…
Here is the answer for anyone that is interested:
Screenshot 2020-12-31 104501

Now seems dynamically positioned when I adjust the screen size

3

You can shorten the transform to transform: translate(-50%,-50%) :+1:

4

I haven’t worked a lot with the Transform class so if this is wrong do let me know as I’m going by the logic in my head which isn’t always logical LOL…

When using the transform, do you need the top and left classes? Or the Position Absolute too?

5

@jo-r

This is how transform works

play with the values in the demobox
here

6

If you use the carousel-caption you can add some css to center what ever you add to the carousel-caption.

HTML

<div class="carousel-item active">
	<img class="w-100 d-block img-responsive" src="http://placehold.it/600.webp/000" />
    <div class="carousel-caption">
        <h1 class="mb-0">Heading 1</h1>
    </div>
</div>

CSS

.carousel-caption {
  top: 50%;
  transform: translateY(-50%);
  bottom: initial;
}
7

You could also use and apply some of the applicable BS4 utility classes like shown here for example. Through the BSS ‘options panel’ you have access to d-flex, align-items-center, justify-content-center, etc.,