时间戳

首页 > 解决方案 > 如何在屏幕中心对齐图像并在图像的左下角添加文本

html - 如何在屏幕中心对齐图像并在图像的左下角添加文本

问题描述

我现在正在建立一个简单的网站，但遇到了一个小问题。如何在屏幕中央对齐图片（带有蓝色气泡的 iMessage 文本），并在图像的左下角放置一个文本（文本是阅读+ 时间）？

<style>
   html, body
{
    height: 100%;
    margin:0;
    padding:0;
}

div {
    position:relative;
    height: 100%;
    width:100%;
}

div img {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}
</style>

<head>
    <div>
        <img src="myimage.jpg"></img>
    </div>
</head>

但是如何在图像正下方的左下角添加文本？

标签： htmlcssformatting

解决方案

像这样的东西可能对你有用...... 

<style>
   html, body
{
    height: 100%;
    margin:0;
    padding:0;
}

.centered{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

</style>
<head>
    <div class="centered">
       <img src="myimage.jpg"></img>
       <p>tester</p>	
    </div>
</head>

尽管我完全同意 Temani 的观点，但有很多关于居中的资源，例如以下链接：

css3 pr 对齐自我

如何设置CSS图像中心

CSS对齐

推荐阅读