Блог

Главная - Вопросы по программированию - Как сделать текстовый центр в изображении HTML CSS

Как сделать текстовый центр в изображении HTML CSS

#html #css

#HTML #css

Вопрос:

У меня проблема с текстом и изображением.

Это тот дизайн, который я хочу:

1

Я уже кодирую это, но у меня проблема с текстом и изображением

Это в HTML css:

2

вот код :

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

если у вас, ребята, есть другой совет или лучший код, это будет здорово.

этот текст предназначен только для того, чтобы он выглядел так, как будто ваш пост в основном состоит из кода; пожалуйста, добавьте еще несколько деталей.

Ответ №1:

Я бы предложил использовать изображения в качестве фона для элементов вместо установки тега img.

Ознакомьтесь с руководством здесь: https://www.w3schools.com/cssref/pr_background-image.asp

Ответ №2:

Вместо того, чтобы использовать

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

Попробуйте использовать flexbox

Я предлагаю использовать это в качестве примера https://css-tricks.com/snippets/css/a-guide-to-flexbox /

Комментарии:

1. я хочу использовать flexbox, но я хочу попробовать другой способ. спасибо за совет

Ответ №3:

Это может быть одним из способов сделать это. Мой пример очень прост, поэтому, возможно, вы могли бы использовать его в качестве отправной точки.

Вот Codepen.

Я предположил, что вы хотите использовать фактические элементы изображения.

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

Ответ №4:

вы можете использовать display:Grid

базовый пример:

 * {
  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>