在CSS中,文字图片设置居中

可以使用text-align属性将文字、图片等元素水平居中，同时也可以使用vertical-align属性将行内元素垂直居中。例如，如果要将一个图片水平居中，可以在其父元素中设置text-align:center；如果要将一段文本垂直居中，可以使用line-height属性设置行高，然后将vertical-align设置为middle。

相关问题

css文字在图片下方居中

你可以使用以下 CSS 代码来实现将文字在图片下方居中的效果：

HTML 代码：

<div class="container">
  <img src="image.jpg" alt="图片">
  <div class="text">这里是文字</div>
</div>

CSS 代码：

.container {
  position: relative;
}
.container img {
  display: block;
  width: 100%;
}
.container .text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  box-sizing: border-box;
}

这里的关键是将父元素设置为 `position: relative`，然后将文本元素设置为 `position: absolute`，上边距设置为 `bottom: 0`，这样就会将文本元素放置在图片下方。为了使文本居中，我们可以将其 `text-align` 属性设置为 `center`。然后，为了使背景更加突出，我们可以添加一个半透明的背景色和一些内边距。

css图片文字垂直居中

可以使用flex布局来实现图片和文字的垂直居中：

HTML代码：

<div class="container">
  <img src="image.jpg" alt="image">
  <p>text</p>
</div>

CSS代码：

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

.container img {
  margin-right: 10px;
}

上面的代码将图片和文字包装在一个容器中，并将容器设置为flex布局。通过`align-items: center`将容器中的元素垂直居中。如果需要让图片和文字之间有一定的间距，可以给图片添加一个右边距。