How do I center this text?

HTML & CSS
1

I have a bit of text with a video background, but for some reason the text is being pushed to one side. How do I get this text horizontally centered?

<div class="row parent-container">
		<div class="w100 video-container">
			<video autoplay poster="images/IMG_0386.JPG" loop muted width="100%">
				<source id="mp4" src="premiere/IMG_1956.mp4" type="video/mp4">
			</video>
		</div>
		<div class="welcome">
			<h1>
				We strive to use all natural, organic, and local ingredients wherever we can.<br>
				We hope to leave the smallest ecological footprint possible.<br>
				As the science of sustainability advances, we will continue to move in the same direction.<br>
				Join us!
			</h1>
		</div>
	</div>

.row {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.parent-container {
	position: relative;
	min-height:100%;
	overflow:hidden;
}

.w100 {
	width: 100%;
}

.video-container video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	transform: translateX(-50%) translateY(-50%);
}

.welcome {
	display: flex;
	min-height:100vh;
	justify-content:center;
	align-items:center;
	text-align: center;
}
2

It is being pushed to the side because it is a flex item laid out in a row.

If you set up some background colors you will see what is going on.

.row {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}
.w100 {
	width: 100%;
        background:lime
}
.welcome {
	display: flex;
	min-height:100vh;
	justify-content:center;
	align-items:center;
	text-align: center;
        background:red
}

537×297 23 KB

1 Like
3

okay, in that case how do I fix this?

4

Have you tried changing direction to column

.row {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
1 Like
5

Yes, that worked perfectly, thank you!

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.