图像css上的文本

Question

任何知道如何做的文本都会出现在这个堆栈映像上。

div有3-4行文字，左边底部有图像和分页.就像这样。

图像垂直对齐:中间，文本垂直对齐:此背景堆栈图像左侧底部的中、小分页文本。

 .image { 
    position: relative; 
    width: 100%; /* for IE 6 */
  }

 div { 
    position: absolute; 
    top: 200px; 
    left: 0; 
    width: 100%; 
  }

Answer 1

因为它看起来像您所需要的，所以您可以使用flex、填充和页边距：

​

div {
  background:url(https://i.stack.imgur.com/EinaJ.png) top center;
  width:620px;
  margin:auto;
  padding:40px 40px 30px;
  height:790px;
  position:relative;
  display:flex;
  flex-flow:column;
  justify-content:center;
}
img, p, nav {  
  padding:5px;
  margin:0;
  /* see me */
  background:pink
}
img {
  margin:auto auto 0;
}
nav {
  bottom:30px;
  right:45px;
  margin:auto 0 0;  
  border-radius:0 0 0.25em 0.25em ;
  /* see me */
  background:rgba(0,0,0,0.2);
  text-align:center;
  word-spacing:0.5em;/* better use margin on links, ... */
}
body {
  background:#777;
}

<div>
  <img src="http://lorempixel.com/200/150"/> 
  <p>here is</p>
  <p>some line</p>
  <p>of</p>
  <p>text</p>
  <nav>navigation : <a href> link</a> <a href> link</a> <a href> link</a></nav>
</div>

​

一个可以使用的资源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

你应该用“位置:相对的”来制作一个容器div，然后在这个div中包含图像，还应该包含带有“位置:绝对；”的文本；

例如：

#container {
    height: 100px;
    width: 100px;
    position: relative;
}

#container img {
    display: block;
    width: 100px;
    height: 100px;
}

#container span {
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
}

还有你的HTML：

<div id="container">
    <img src="" alt="" />
    <span>Hello World</span>
</div>