CODEWITHSUNDEEP
htmlcss
Ahmad Faidzal ibrahim
Ahmad Faidzal ibrahim

Reputation: 1

How to make text center in image HTML CSS

I have a problem with text and image.

This is the design that i want it:

1

I already code this but I have a problem with the text and image

This is in HTML css:

2

here is the code :

@font-face {
    src: url(source/font/SansitaSwashed-Regular.ttf);
    font-family: 'Sansita';
}
    
/*  Default Styling   */
* {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}
    
body {
     font-family: 'Sansita', sans-serif;
}
    
.container {
     height: 100vh;
     width: auto;
     padding: 0;
}
    
.feature-showcase {
     list-style: none;
     width: 100%;
}
    
.feature-showcase li {
     display: block;
     float: left;
     width: 33.3%;
     /*3 li should occupy full width.*/
}
    
.meal-photo {
     width: 100%;
     margin: 0;
     overflow: hidden;
     /*This is to prevent spilling out of images when we scale the images.*/
     background: #000;
     text-align: center;
}
    
.meal-photo img {
     opacity: 0.7;
     width: 100%;
     height: 50vh;
     position: relative;
     /*This will scale the image in proportion to the 25% width set for meals-showcase-li*/
     transform: scale(1.15);
     /*This is a part of our "animation" for food images.*/
     transition: transform 0.5s, opacity 0.5s;
     /*animation - changing from this css setting to another will take some time*/
}
    
.meal-photo img:hover {
     opacity: 1;
     transform: scale(1.03);
     /*Not 1 because we want to cover some whitespace below each image.*/
}
    
.text {
     text-align: center;
     color: white;
}
<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Kemanaa</title>
    
    </head>
    
    <body>
    
        <div class="container">
            <ul class="feature-showcase">
                <li>
                    <figure class="meal-photo">
                        <img src="source/image/oleh-oleh1.jpg" alt="">
                        <!-- <p class="text">Oleh oleh</p> -->
                    </figure>
                </li>
                <li>
                    <figure class="meal-photo">
                        <img src="source/image/kuliner1.jpg" alt="">
                    </figure>
                </li>
                <li>
                    <figure class="meal-photo">
                        <img src="source/image/wisata1.jpg" alt="">
                    </figure>
                </li>
            </ul>
            <ul class="feature-showcase">
                <li>
                    <figure class="meal-photo">
                        <img src="source/image/oleh-oleh2.jpg" alt="">
                    </figure>
                </li>
                <li>
                    <figure class="meal-photo">
                        <img src="source/image/kuliner2.jpg" alt=>
                    </figure>
                </li>
                <li>
                    <figure class="meal-photo">
                        <img src="source/image/wisata2.jpg" alt=" ">
                    </figure>
                </li>
            </ul>
        </div>
    
    </body>
    
    </html>

if you guys have another advice or better code, it will be great.

this text is just for It looks like your post is mostly code; please add some more details.

Upvotes: 0

Views: 77

Answers (4)

Pete Wolf
Pete Wolf

Reputation: 11

I would suggest using the images as background for the elements instead of setting an img tag.

Check the guide here: https://www.w3schools.com/cssref/pr_background-image.asp

Upvotes: 1

Mister Jojo
Mister Jojo

Reputation: 22320

you can use display:Grid

basic example:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }
body {
  overflow: hidden;
  }
.container {
  height: 100vh;
  width:  100vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  }
.container figure {
  position:relative
  }
.container figure img {
  height: 100%;
  width:  100%;
  }
.container figure figcaption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  font-size: 2em;
  }
<div class="container">
  <figure >
    <img src="https://picsum.photos/id/251/500/300.jpg" alt="">
    <figcaption>Oleh-oleh</figcaption>
  </figure>
  <figure >
    <img src="https://picsum.photos/id/252/500/300.jpg" alt="">
    <figcaption></figcaption>
  </figure>
  <figure >
    <img src="https://picsum.photos/id/253/500/300.jpg" alt="">
    <figcaption>Wisata</figcaption>
  </figure>
  <figure >
    <img src="https://picsum.photos/id/254/500/300.jpg" alt="">
    <figcaption></figcaption>
  </figure>
  <figure >
    <img src="https://picsum.photos/id/255/500/300.jpg" alt="">
    <figcaption>Kuliner</figcaption>
  </figure>
  <figure >
    <img src="https://picsum.photos/id/256/500/300.jpg" alt="">
    <figcaption></figcaption>
  </figure>
</div>

Upvotes: 0

samkitson
samkitson

Reputation: 184

This could be one way to do it. My example is very simple so maybe you could use it as a starting point.

Here is a Codepen.

I presumed you wanted to use actual image elements.

HTML

<div class="container">
  <div class="item">
    <img src="https://source.unsplash.com/random/800x600" />
    <div class="text">
      <p>Text in here</p>
    </div>
  </div>
  <div class="item">
    <img src="https://source.unsplash.com/random/800x600" />
    <div class="text">
      <p>Text in here</p>
    </div>
  </div>
  <div class="item">
    <img src="https://source.unsplash.com/random/800x600" />
    <div class="text">
      <p>Text in here</p>
    </div>
  </div>
  <div class="item">
    <img src="https://source.unsplash.com/random/800x600" />
    <div class="text">
      <p>Text in here</p>
    </div>
  </div>
  <div class="item">
    <img src="https://source.unsplash.com/random/800x600" />
    <div class="text">
      <p>Text in here</p>
    </div>
  </div>
  <div class="item">
    <img src="https://source.unsplash.com/random/800x600" />
    <div class="text">
      <p>Text in here</p>
    </div>
  </div>
</div>

CSS

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.item {
  width: 33.3333%;
  height: 50%;
  position: relative;
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text p {
  color: white;
}

Upvotes: 0

Kaede
Kaede

Reputation: 198

Instead of using

.feature-showcase li {
       display: block;
       float: left;
       width: 33.3%;
       /*3 li should occupy full width.*/
    }

Try using flexbox

I suggest using this as example https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 0

Related Questions