How to centre-align a title above few image? - html

Question

my relative html code now is like this. I haven't add the title in the below code yet. Please help. Thank you.
<div class="body">
<div class="intro">
<h1>Main.</h1>
<h3>type something</h2>
<section class="buttonone">
<button>Sign up</button>
</section>
</div>
<section class="container">
<figure>
<div class="random"><img src="drink.jpg" alt=""></div>
<figcaption>lemonade</figcaption>
</figure>
<figure>
<div class="random"><img src="toro.jpg" alt=""></div>
<figcaption>omakasa-Toro sushi</figcaption>
</figure>
<figure>
<div class="random"><img src="noodle.jpg" alt=""></div>
<figcaption>ramei</figcaption>
</figure>
<figure>
<div class="random"><img src="oyster.jpg" alt=""></div>
<figcaption>oyster sushi</figcaption>
</figure>
</section>

Answer 1

use flexbox
img {
width: 10vw;
}
.container {
display: flex;
justify-content: space-around;
}
#title{
text-align:center;
border:solid 1px black;
}
figure{
border:solid 1px black;
padding:6px;
}
<div id='title'>my Title</div>
<section class="container">
<figure>
<div class="random"><img src="https://via.placeholder.com/150" alt=""></div>
<figcaption>lemon</figcaption>
</figure>
<figure>
<div class="random"><img src="https://via.placeholder.com/150" alt=""></div>
<figcaption>omaka</figcaption>
</figure>
<figure>
<div class="random"><img src="https://via.placeholder.com/150" alt=""></div>
<figcaption>ramei</figcaption>
</figure>
<figure>
<div class="random"><img src="https://via.placeholder.com/150" alt=""></div>
<figcaption>oysteri</figcaption>
</figure>
</section>

Answer 2

you just need to add flexbox to your CSS code! with justify-content
I also used css grid for centering vertically easily using the new place-items css property
.container {
/* make items one near the other in the X axis */
display: flex;
justify-content: space-around;
}
img {
/* if the image is a lot bigger, it will be resized and be responsive */
max-width: 100%;
}
/* centering vertically */
.container>figure,
.intro {
display: grid;
place-items: center;
}
<div class="body">
<div class="intro">
<h1>Main.</h1>
<h3>type something</h2>
<section class="buttonone">
<button>Sign up</button>
</section>
</div>
<section class="container">
<!-- 1 -->
<figure>
<div class="random">
<img src="https://picsum.photos/200" alt="">
</div>
<figcaption>lemonade</figcaption>
</figure>
<!-- 2 -->
<figure>
<div class="random">
<img src="https://picsum.photos/200" alt="">
</div>
<figcaption>omakasa-Toro sushi</figcaption>
</figure>
<!-- 3 -->
<figure>
<div class="random">
<img src="https://picsum.photos/200" alt="">
</div>
<figcaption>ramei</figcaption>
</figure>
<!-- 4 -->
<figure>
<div class="random">
<img src="https://picsum.photos/200" alt="">
</div>
<figcaption>oyster sushi</figcaption>
</figure>
</section>
</div>

Answer 3

Make a parent container class=container and make two child containers class=text centre for center aligned text and class=img grid for the image grid.
Now your parent container class will be having display: flex property with flex-grow or width property now for text you'll be putting text-align: center and for grid class you'll be using justify-content: space-between

Answer 4

Simply you have to add css h1 {text-align: center;}
.container{
display:flex;
}
h1{
text-align: center;
}
img{
max-width: 100%;
}
<div class="body">
<div class="intro">
<h1>Title</h1>
</div>
<section class="container">
<figure>
<div class="random">
<img src="https://i.picsum.photos/id/1076/201/201.jpg?hmac=w0KXxl0av8l5EHqgJfjULxPosXBvFTV86-fnAGgZbnY" alt="">
</div>
</figure>
<figure>
<div class="random">
<img src="https://i.picsum.photos/id/1076/201/201.jpg?hmac=w0KXxl0av8l5EHqgJfjULxPosXBvFTV86-fnAGgZbnY" alt="">
</div>
</figure>
<figure>
<div class="random">
<img src="https://i.picsum.photos/id/1076/201/201.jpg?hmac=w0KXxl0av8l5EHqgJfjULxPosXBvFTV86-fnAGgZbnY" alt="">
</div>
</figure>
<figure>
<div class="random">
<img src="https://i.picsum.photos/id/1076/201/201.jpg?hmac=w0KXxl0av8l5EHqgJfjULxPosXBvFTV86-fnAGgZbnY" alt="">
</div>
</figure>
</section>
</div>

Answer 5

Use display: flex; justify-content: center; and make sure you have a width of a 100% and those CSS properties will work almost everywhere.
<div class="body">
<div class="intro">
<h1>Main.</h1>
<h3>type something</h2>
<section class="buttonone">
<button>Sign up</button>
</section>
</div>
<h1 class="title">Title</h1>
<section class="container">
<figure>
<div class="random">
<img src="./pexels-till-daling-12461880.jpg" alt="">
</div>
<figcaption>lemonade</figcaption>
</figure>
<figure>
<div class="random">
<img src="./pexels-till-daling-12461880.jpg" alt="">
</div>
<figcaption>omakasa-Toro sushi</figcaption>
</figure>
<figure>
<div class="random">
<img src="./pexels-till-daling-12461880.jpg" alt="">
</div>
<figcaption>ramei</figcaption>
</figure>
<figure>
<div class="random">
<img src="./pexels-till-daling-12461880.jpg" alt="">
</div>
<figcaption>oyster sushi</figcaption>
</figure>
</section>
</div>
.title {
width: 100%;
display: flex;
justify-content: center;
}
.container {
display: flex;
justify-content: center;
}
img {
width: 10rem;
height: 10rem;
}