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

我想你忘了改变div的颜色＃000。或者它可能是z-index的问题

com.mysql.jdbc.exceptions.jdbc4.MySQLIntegrityConstraintViolationException: 

Cannot add or update a child row: a foreign key constraint fails (`grades_book_db`.`grades`, CONSTRAINT `FK_Grades_Subject` FOREIGN KEY (`Subject_Id`) REFERENCES `subjects` (`Subject_Id`))
    at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
    at sun.reflect.NativeConstructorAccessorImpl.newInstance(Unknown Source)
    at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(Unknown Source)
    at java.lang.reflect.Constructor.newInstance(Unknown Source)
    at com.mysql.jdbc.Util.handleNewInstance(Util.java:425)
    at com.mysql.jdbc.Util.getInstance(Util.java:408)
    at com.mysql.jdbc.SQLError.createSQLException(SQLError.java:935)
    at com.mysql.jdbc.MysqlIO.checkErrorPacket(MysqlIO.java:3970)
    at com.mysql.jdbc.MysqlIO.checkErrorPacket(MysqlIO.java:3906)
    at com.mysql.jdbc.MysqlIO.sendCommand(MysqlIO.java:2524)
    at com.mysql.jdbc.MysqlIO.sqlQueryDirect(MysqlIO.java:2677)
    at com.mysql.jdbc.ConnectionImpl.execSQL(ConnectionImpl.java:2549)
    at com.mysql.jdbc.PreparedStatement.executeInternal(PreparedStatement.java:1861)
    at com.mysql.jdbc.PreparedStatement.executeUpdateInternal(PreparedStatement.java:2073)
    at com.mysql.jdbc.PreparedStatement.executeUpdateInternal(PreparedStatement.java:2009)
    at com.mysql.jdbc.PreparedStatement.executeLargeUpdate(PreparedStatement.java:5098)
    at com.mysql.jdbc.PreparedStatement.executeUpdate(PreparedStatement.java:1994)
    at org.hibernate.engine.jdbc.internal.ResultSetReturnImpl.executeUpdate(ResultSetReturnImpl.java:204)
    ... 18 more

Answer 2

您应该使用'position：relative;'创建一个容器div，然后在此div中包含图像，并且还包含带有'position：absolute;'的文本;

例如：

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

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

其他可能有用的资源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

文字图像css

3 个答案: