Get Images with text to center to page [duplicate] - html

Question

This question already has an answer here:
Centre images with text below [duplicate]
(1 answer)
Closed 1 year ago.
Hi Im making a website for a school project and I need the images to be centered in the middle of the page with the text below. Right now the images and text are pushed to the left side. I need the images to be centered in the page and spread out, with the text still below.
HTML
<section class="middle">
<div class="rowone">
<img src="images/logofootball.png" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="images/logofootball.png" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="images/logofootball.png" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="images/logofootball.png" height="200" width="200">
<div class="text">Text</div>
</div>
</section>
CSS
.middle {
position: relative;
overflow: hidden;
}
.rowone {
float: left;
width: 200px;
margin: 1% 1% 45px 1%;
}
.text {
position: absolute;
bottom: 0px;
margin: 30px;
background-color: gray;
}
.rowone img {
width: 100%;
display: block;
}

Answer 1

This should do the trick.
HTML
<section class="middle">
<center>
<br>
<br>
<br>
<br>
<div class="rowone">
<img src="images/logofootball.png" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="images/logofootball.png" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="images/logofootball.png" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="images/logofootball.png" height="200" width="200">
<div class="text">Text</div>
</div>
</center>
</section>
CSS
.middle {
position: relative;
overflow: hidden;
}
.rowone {
padding-left: 100px;
float: left;
width: 200px;
margin: 1% 1% 45px 1%;
}
.text {
position: absolute;
bottom: 0px;
margin: 30px;
background-color: gray;
}
.rowone img {
width: 100%;
display: block;
}

Answer 2

Take a look at following example. This can be comfortable solution for you. Image and Text are wrapped by .wrapper and
flex: 1; basically says, that all wrapper elements should have the same size within .rowone .
.middle {
position: fixed;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
}
.rowone {
display: flex;
}
.wrapper {
display: inline-block;
text-align: center;
max-height: 200px;
flex: 1;
}
.text {
background-color: gray;
}
img {
display: inline-block;
}
<section class="middle">
<div class="rowone">
<div class="wrapper">
<img src="https://via.placeholder.com/150">
<div class="text">Text</div>
</div>
<div class="wrapper">
<img src="https://via.placeholder.com/150">
<div class="text">Text</div>
</div>
<div class="wrapper">
<img src="https://via.placeholder.com/150">
<div class="text">Text</div>
</div>
<div class="wrapper">
<img src="https://via.placeholder.com/150">
<div class="text">Text</div>
</div>
</div>
</section>

Answer 3

Try to learn and use CSS Flex Container
Now your parent container .middle will look like this:
.middle{
display: flex; // this will help you align your elements.
justify-content: center; // with the center value, it will align your items at the center of your parent container.
align-items: center; // and this will align your items in the middle of the parent container which is what you're trying to achieve.
}
and you should leave out the float: left on your .rowone items. This is what makes your items be pushed on to the left side of the container.

Answer 4

I have used flex to spread out the images. I think it is the best way to divide a section into columns.
And a simple text align center for centered text.
JSFiddle
HTML
<section class="middle">
<div class="rowone">
<img src="https://via.placeholder.com/200" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="https://via.placeholder.com/200" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="https://via.placeholder.com/200" height="200" width="200">
<div class="text">Text</div>
</div>
<div class="rowone">
<img src="https://via.placeholder.com/200" height="200" width="200">
<div class="text">Text</div>
</div>
</section>
CSS
.middle {
/*position: relative;
overflow: hidden;*/
display: flex;
justify-content: space-between;
}
.rowone {
/*float: left;
width: 200px;
margin: 1% 1% 45px 1%;*/
text-align: center;
}
.text {
/*position: absolute;
bottom: 0px;
margin: 30px;*/
background-color: gray;
display:inline-block;
}
.rowone img {
width: 100%;
display: block;
}