<style> div { display: flex; justify-content: center; align-items: center; height: 100vh; } img { max-width: 100%; max-height: 100%; }</style><div> <img src="C:\Users\liao\Desktop\11\1.jpg" alt="图片"></div>让图片居中的同时把静夜思写在图片中间
时间: 2023-06-27 19:02:05 浏览: 70
很抱歉,我作为一个 AI 并没有权限访问你的本地文件系统。但是,我可以告诉你如何用 HTML 和 CSS 实现居中显示图片和文字。你可以将你的图片和文字写在 HTML 文件中,然后使用下面的代码进行样式设置:
```
<style>
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.content {
text-align: center;
}
.content p {
font-size: 24px;
font-weight: bold;
}
.content img {
max-width: 100%;
max-height: 100%;
}
</style>
<div class="wrapper">
<div class="content">
<p>静夜思</p>
<img src="your-image-url" alt="图片">
</div>
</div>
```
你需要将 `your-image-url` 替换成你自己的图片 URL。这个代码会将图片和文字都居中显示,并且文字会在图片的中间。
相关问题
<style> .wrapper { display: flex; justify-content: center; align-items: center; height: 100vh; } .content { text-align: center; } .content p { font-size: 24px; font-weight: bold; } .content img { max-width: 100%; max-height: 100%; } </style> <div class="wrapper"> <div class="content"> <p>静夜思</p> <p>唐.李白</p> <p>床前明月光,疑是地上霜。</p> <p>举头望明月,低头思故乡。</p></div> <img src="C:\Users\liao\Desktop\11\1.jpg"> </div> </div> <!DOCTYPE html>添加一个边框
你可以在 `.wrapper` 和 `.content` 的样式中添加 `border: 1px solid black;` 来给整个对话框添加一个边框,如下所示:
```
<style>
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
border: 1px solid black; /* 添加边框 */
}
.content {
text-align: center;
border: 1px solid black; /* 添加边框 */
}
.content p {
font-size: 24px;
font-weight: bold;
}
.content img {
max-width: 100%;
max-height: 100%;
}
</style>
<div class="wrapper">
<div class="content">
<p>静夜思</p>
<p>唐.李白</p>
<p>床前明月光,疑是地上霜。</p>
<p>举头望明月,低头思故乡。</p>
</div>
<img src="C:\Users\liao\Desktop\11\1.jpg">
</div>
```
注意,这只是添加了一个简单的黑色实线边框,你可以根据需要进行调整。
<!DOCTYPE html> <html> <head> <title>Live</title> <style> .container { position: relative; max-height: 100vh; /* 设置容器最大高度不超过浏览器高度 / text-align: center; / 水平居中对齐 / display: flex; / 使用flex布局 / justify-content: center; / 水平居中对齐 / align-items: center; / 垂直居中对齐 / } .container img { width: 100%; / 设置图片宽度为100% / height: auto; / 设置图片高度为自适应 / max-height: calc(100vh - 80px); / 设置图片最大高度不超过容器高度减去一定的边距(20px) */ } </style> </head> <body> <div class="container"> <img src="test_data/test.jpg" alt="your_image_description"> </div> </body> </html> 分析上面的代码, 如何让图片水平居中
可以在 `.container` 类选择器中添加 `text-align: center;` 属性,将图片水平居中对齐。例如:
```
.container {
position: relative;
max-height: 100vh;
text-align: center; /* 添加text-align属性 */
display: flex;
justify-content: center;
align-items: center;
}
```
另外需要注意的是,图片需要设置为块级元素,可以使用 `display: block;` 或者 `display: inline-block;`。同时,需要将图片的宽度设置为 100%。完整的代码如下:
```
.container {
position: relative;
max-height: 100vh;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.container img {
display: block; /* 或者 inline-block */
width: 100%;
height: auto;
max-height: calc(100vh - 80px);
}
```