I am trying to align a text in the middle of the image. I am not sure what i am doing wrong here

Question

I am new to CSS and HTML and i am trying to get the text to appear in the middle of the image, I am not sure what i am doing wrong. I removed text-align center because it was appearing in the middle of the whole page. I have two containers dividing the homepage into two sections, I want to make the text appear in the middle of each container which has an image

 .column { float: left; width: 50%; padding: 10px; height:800px; text-align: center; color: white; } .centered { left: 90; position:absolute; top: 260px; width: 100% } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } img { width:100%; height:100%; }

 <div class="row"> <div class="column" style="background-color:#aaa;"> <img src="4.jpg"alt="Snow"> <div class="centered">I want This Text in the center</div> </div> <div class="column" style="background-color:#bbb;"> <img src="5.jpg"alt="Snow">

Answer 1

.centered has position: absolute; which will reference the nearest parent whose position has been set, or if there are none set then it will reference the document body (the window or view port). In this case, by setting .column to position: relative; the absolute position of .centered will refer to the constraints of .column instead of the window.

 .column { float: left; width: 50%; padding: 10px; height:800px; text-align: center; color: white; position: relative; } .centered { position:absolute; top: 260px; width: 100% } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } img { width:100%; height:100%; }

 <div class="row"> <div class="column" style="background-color:#aaa;"> <img src="4.jpg"alt="Snow"> <div class="centered">I want This Text in the center</div> </div> <div class="column" style="background-color:#bbb;"> <img src="5.jpg"alt="Snow">

Answer 2

Try this, it should be responsive too.

 .column { width: 50%; padding: 10px; height:400px; position:relative; color: white; } .centered { top: calc(50% - 24px); /*24px is the font size of the text */ position:absolute; text-align:center; margin: 0 auto; width: 100% } img { width:100%; height:100%; }

 <div class="row"> <div class="column" style="background-color:#aaa;"> <img src="4.jpg"> <div class="centered">I want This Text in the center</div> </div> </div>