my relative html code now is like this. I haven't add the title in the below code yet. Please help. Thank you.

<div >
        <div >
            <h1>Main.</h1>
            <h3>type something</h2>
            <section >
                <button>Sign up</button>
            </section>  
        </div>
        <section >
            <figure>
            <div ><img src="drink.jpg" alt=""></div>
            <figcaption>lemonade</figcaption>
            </figure>
            <figure>
            <div ><img src="toro.jpg" alt=""></div>
            <figcaption>omakasa-Toro sushi</figcaption>
            </figure>
            <figure>
            <div ><img src="noodle.jpg" alt=""></div>
            <figcaption>ramei</figcaption>
            </figure>
            <figure>
            <div ><img src="oyster.jpg" alt=""></div>
            <figcaption>oyster sushi</figcaption>
            </figure>
        </section>

CodePudding user response：

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 >
    <figure>
      <div ><img src="https://via.placeholder.com/150" alt=""></div>
      <figcaption>lemon</figcaption>
    </figure>
    <figure>
      <div ><img src="https://via.placeholder.com/150" alt=""></div>
      <figcaption>omaka</figcaption>
    </figure>
    <figure>
      <div ><img src="https://via.placeholder.com/150" alt=""></div>
      <figcaption>ramei</figcaption>
    </figure>
    <figure>
      <div ><img src="https://via.placeholder.com/150" alt=""></div>
      <figcaption>oysteri</figcaption>
    </figure>
  </section>

CodePudding user response：

you just need to add

.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 >
  <div >
    <h1>Main.</h1>
    <h3>type something</h2>
      <section >
        <button>Sign up</button>
      </section>
  </div>
  <section >
    <!-- 1 -->
    <figure>
      <div >
        <img src="https://picsum.photos/200" alt="">
      </div>
      <figcaption>lemonade</figcaption>
    </figure>

    <!-- 2 -->
    <figure>
      <div >
        <img src="https://picsum.photos/200" alt="">
      </div>
      <figcaption>omakasa-Toro sushi</figcaption>
    </figure>

    <!-- 3 -->
    <figure>
      <div >
        <img src="https://picsum.photos/200" alt="">
      </div>
      <figcaption>ramei</figcaption>
    </figure>

    <!-- 4 -->
    <figure>
      <div >
        <img src="https://picsum.photos/200" alt="">
      </div>
      <figcaption>oyster sushi</figcaption>
    </figure>
  </section>
</div>

CodePudding user response：

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

CodePudding user response：

Simply you have to add css h1 {text-align: center;}

.container{
  display:flex;
}

h1{
  text-align: center;
}

img{
  max-width: 100%;
}

<div >
        <div >
            <h1>Title</h1>
        </div>
        <section >

            <figure>
                <div >
                    <img src="https://i.picsum.photos/id/1076/201/201.jpg?hmac=w0KXxl0av8l5EHqgJfjULxPosXBvFTV86-fnAGgZbnY" alt="">
                </div>
            </figure>

            <figure>
                <div >
                    <img src="https://i.picsum.photos/id/1076/201/201.jpg?hmac=w0KXxl0av8l5EHqgJfjULxPosXBvFTV86-fnAGgZbnY" alt="">
                </div>
            </figure>

            <figure>
                <div >
                    <img src="https://i.picsum.photos/id/1076/201/201.jpg?hmac=w0KXxl0av8l5EHqgJfjULxPosXBvFTV86-fnAGgZbnY" alt="">
                </div>
            </figure>

            <figure>
                <div >
                    <img src="https://i.picsum.photos/id/1076/201/201.jpg?hmac=w0KXxl0av8l5EHqgJfjULxPosXBvFTV86-fnAGgZbnY" alt="">
                </div>
            </figure>
        </section>
    </div>

CodePudding user response：

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 >
    <div >
        <h1>Main.</h1>
        <h3>type something</h2>
        <section >
            <button>Sign up</button>
        </section>  
    </div>
    <h1 >Title</h1>
    <section >
        <figure>
        <div >
            <img src="./pexels-till-daling-12461880.jpg" alt="">
        </div>
        <figcaption>lemonade</figcaption>
        </figure>
        <figure>
        <div >
            <img src="./pexels-till-daling-12461880.jpg" alt="">
        </div>
        <figcaption>omakasa-Toro sushi</figcaption>
        </figure>
        <figure>
        <div >
            <img src="./pexels-till-daling-12461880.jpg" alt="">
        </div>
        <figcaption>ramei</figcaption>
        </figure>
        <figure>
        <div >
            <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;
    }