Question

我现在正在建立一个简单的网站，面临一个小问题。如何在屏幕中央对齐图片（iMessage文字和蓝色气泡），并在图片的左下角放置文字（文字读取 +时间）？

＆＃13;

<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>

＆＃13;

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

Answer 1

这样的事可能对你有用......

＆＃13;

<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>

＆＃13;

虽然我完全同意Temani，但有很多关于中心的资源，例如下面的链接：

css3 pr align-self

how to css image center

css align

Answer 2

您想将图像设置在屏幕中心还是div的中心？

如果要将其水平放置在屏幕中央，则应设置的保证金左：汽车; margin-right：auto;

如果你想在图像上添加文字，你应该在div的背景中设置该图像，并在该div中的任何地方添加文本

.imgdiv{ background: url(your IMG url) no-repeat center; 
-webkit-background-size: contain; 
-moz-background-size: contain;
 -o-background-size: contain; 
background-size: contain; 
height: 150px; width: 300px; 
}
.imgtxt{
   left:0; bottom:0;
}

<div class="imgdiv" >
     <span class="imgtxt">Your text</span>
 </div>

如何将图像对齐在屏幕中央，并在图像的左下角添加文本

2 个答案: