css文字在图片下方居中
时间: 2023-06-29 17:04:02 浏览: 129
你可以使用以下 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中的flexbox布局实现文字在图片下方的效果。具体做法如下:
HTML代码:
```html
<div class="container">
<img src="image.jpg">
<p>这是图片下方的文字</p>
</div>
```
CSS代码:
```css
.container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.container img {
width: 100%;
max-width: 500px; /* 图片最大宽度 */
}
.container p {
margin-top: 10px; /* 文字和图片之间的间距 */
}
```
解释:
1. 将容器设置为`display: flex`,并且`flex-direction: column`使得子元素垂直排列。
2. 使用`align-items: center`使得图片和文字在水平方向上居中对齐。
3. 使用`text-align: center`使得文字在垂直方向上居中对齐。
4. 为了避免图片变形,使用`max-width`将图片最大宽度限制在500px以内。
5. 使用`margin-top`设置文字和图片之间的间距。
html图片置于文字下方
要将图片置于文字下方,可以使用以下的HTML和CSS代码:
```html
<div class="container">
<img src="your-image-url" alt="your-image-description">
<p>Your text goes here.</p>
</div>
```
```css
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
img {
margin-bottom: 10px;
}
```
这段代码将创建一个包含图片和文字的div元素,并将它们垂直排列。通过设置容器的flexbox属性,可以使图片和文本垂直居中,并将它们居中对齐。通过设置图片的margin-bottom属性,可以将图片下方留出一些空间,以使文本更易于阅读。