css让文字和多张图片展示在同一行并居中

你可以使用CSS的Flexbox布局来实现文字和多张图片在同一行居中显示。具体操作如下：

HTML代码：

<div class="container">
  <p>这是一段文字</p>
  <img src="图片1.jpg" alt="图片1">
  <img src="图片2.jpg" alt="图片2">
  <img src="图片3.jpg" alt="图片3">
</div>

CSS代码：

.container {
  display: flex; /* 将容器设置为flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.container p {
  margin-right: 10px; /* 文字和图片之间的距离 */
}

.container img {
  width: 100px; /* 设置图片宽度 */
  height: 100px; /* 设置图片高度 */
}

这样就可以实现文字和多张图片在同一行居中显示了。

相关问题

css让文字和多张图片展示在同一行并垂直居中

可以使用flex布局实现文字和图片在同一行并垂直居中的效果。

HTML代码：

<div class="container">
  <img src="image1.jpg" alt="Image 1">
  <p>这是一段文字</p>
  <img src="image2.jpg" alt="Image 2">
</div>

CSS代码：

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
}

.container img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.container p {
  margin: 0 10px;
}

在上面的例子中，我们使用了`display: flex`将容器设置为弹性布局。这样子元素就会水平排列在同一行中。同时，使用`align-items: center`将子元素垂直居中。

为了让图片和文字大小一致，我们给图片设置了固定的宽和高，并使用`object-fit: cover`将图片等比例缩放，以填充整个容器。

最后，我们给文字设置了左右的margin，以增加与图片的间距。这样就可以实现文字和图片在同一行并垂直居中的效果。

H5 图片展示区宽为720px，展示区水平居中 每行显示三个张图，有多张自动换行，一行不满三张，左边对齐 图片底有个透明度为.5的蒙板，写图片描述的文字，高度为2rem 实现特效，当光标移入时，图片放大1.1倍，离开还原

这个问题涉及到前端页面的布局和交互特效，可以使用HTML、CSS和JavaScript来实现。以下是一个简单的实现方案：

HTML代码：

<div class="image-list">
  <div class="image-item">
    <img src="image1.jpg">
    <div class="description">图片描述1</div>
  </div>
  <div class="image-item">
    <img src="image2.jpg">
    <div class="description">图片描述2</div>
  </div>
  <div class="image-item">
    <img src="image3.jpg">
    <div class="description">图片描述3</div>
  </div>
  <!-- 其他图片项 -->
</div>

CSS代码：

.image-list {
  width: 720px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.image-item {
  width: calc(33.33% - 10px);
  margin-right: 10px;
  margin-bottom: 10px;
  position: relative;
}

.image-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.2s ease-out;
}

.image-item .description {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 14px;
  height: 2rem;
  padding: 0.5rem;
  box-sizing: border-box;
}

.image-item:hover img {
  transform: scale(1.1);
}

解释一下CSS的实现：

1. `image-list`是一个div容器，设置宽度为720px，并且水平居中显示。
2. `image-item`是每个图片项的容器，设置宽度为33.33%，也就是一行显示三个，同时设置右边距和下边距为10px，实现图片间的间距。注意，这里使用`calc()`函数计算宽度，去掉右边距的10px。
3. `image-item img`是图片元素，设置宽度为100%自适应容器宽度，高度自适应，同时设置一个过渡效果，当鼠标移入时，图片元素的`transform`属性会从默认值（1）变为1.1，实现放大特效。
4. `image-item .description`是图片描述文字的容器，设置绝对定位在图片底部，并且设置一个透明度为0.5的黑色背景，同时设置文字颜色为白色，字号为14px，高度为2rem，实现文字的布局和样式。

JavaScript部分可以不用编写，这个特效可以直接使用CSS实现。