在CSS中,文字图片设置居中
时间: 2023-05-23 08:03:37 浏览: 53
可以使用text-align属性将文字、图片等元素水平居中,同时也可以使用vertical-align属性将行内元素垂直居中。例如,如果要将一个图片水平居中,可以在其父元素中设置text-align:center;如果要将一段文本垂直居中,可以使用line-height属性设置行高,然后将vertical-align设置为middle。
相关问题
css文字在图片下方居中
你可以使用以下 CSS 代码来实现将文字在图片下方居中的效果:
HTML 代码:
```html
<div class="container">
<img src="image.jpg" alt="图片">
<div class="text">这里是文字</div>
</div>
```
CSS 代码:
```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设置文字在图片内上下左右居中
可以使用CSS中的flex布局将文字和图片包裹在一个父容器中,通过align-items和justify-content属性来实现上下左右居中。例如:
HTML代码:
```
<div class="container">
<img src="example.jpg">
<div class="text">
文字内容
</div>
</div>
```
CSS代码:
```
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 300px; /* 父容器高度 */
}
img {
width: 200px;
height: 200px;
}
```