html - 图片上的文字CSS

Question

text comes over this stack image any idea how to do it

div 在左侧底部有一个 3-4 行的文本，一个图像和分页。像这样。

图像垂直对齐:中间，文本垂直对齐:中间，此背景堆栈图像左下角的小分页文本

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

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

Answer 1

因为它看起来像你需要的，你可以使用 flex、padding 和 margin:

div {
  background:url(/image/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/