如何在图像 HTML CSS 中使文本居中

Question

我有 text 和 image 问题。

这是我想要的设计：

我已经对此进行了编码，但是文本和图像有问题

这是在 HTML css 中：

这是代码：

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

如果你们有其他建议或更好的代码，那就太好了。

此文本仅用于看起来您的帖子主要是代码； 请添加更多详细信息。

Answer 1

我建议使用图像作为元素的背景，而不是设置 img 标签。

在此处查看指南： https : //www.w3schools.com/cssref/pr_background-image.asp

Answer 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/

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

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

如何在图像 HTML CSS 中使文本居中

问题描述

4 个解决方案

解决方案1
1 2020-10-06 11:53:35

解决方案2
0 2020-10-06 11:48:49

解决方案3
0 2020-10-06 12:26:49

解决方案4
0 2020-10-06 13:53:39

如何在图像 HTML CSS 中使文本居中

问题描述

4 个解决方案

解决方案1 1 2020-10-06 11:53:35

解决方案2 0 2020-10-06 11:48:49

解决方案3 0 2020-10-06 12:26:49

解决方案4 0 2020-10-06 13:53:39

解决方案1
1 2020-10-06 11:53:35

解决方案2
0 2020-10-06 11:48:49

解决方案3
0 2020-10-06 12:26:49

解决方案4
0 2020-10-06 13:53:39