CODEWITHSUNDEEP
htmlcss
Birddd
Birddd

Reputation: 15

How to centre-align a title above few image?

my desire outcome

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>

Upvotes: 1

Views: 138

Answers (5)

Ramadhan
Ramadhan

Reputation: 11

Use display: flex; justify-content: center; and make sure you have a width of a 100% and those CSS properties will work almost everywhere.

screenshot

<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;
    }

Upvotes: 0

Laaouatni Anas
Laaouatni Anas

Reputation: 3855

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

enter image description here

.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>

Upvotes: 0

DCR
DCR

Reputation: 15700

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>

Upvotes: 1

Abhishek Shah
Abhishek Shah

Reputation: 460

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>

Upvotes: 0

Daksharaj kamal
Daksharaj kamal

Reputation: 624

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

Upvotes: 0

Related Questions