Question

This is the code I am using. When I position .thumb-title as absolute with bottom: 50% it moves it up relative to it's own height.

.project-thumb {
  position: relative;
}
.thumb-title {
  font: 400 1.5rem'Lato', sans-serif;
  position: absolute;
  bottom: 50%;
  text-align: center;
}

<li>
  <a class="project-thumb" href="ktc.html">
    <img class="thumb" src="thumbs/thumb-201612t-ktc.jpg">
    <h3 class="thumb-title">Sample text</h3>
  </a>
</li>

Answer 1

如果拇指具有已知宽度，则可以使用display:inline-block;，vertical-align:middle，text-align:center;和否定margin。这可以避免absolute和transform。

＆＃13;

.project-thumb,
.project-thumb h3 {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 150px;/* thumb's width */
  box-sizing: border-box;/* if you add borders or padding*/
  color: initial
}
.thumb {
  vertical-align: middle;
  margin-right: -150px;/* reduce virtually width to 0 to pull text */
}
.thumb-title {
  z-index: 1;/* make sure it stands on top of img*/
  text-align: center;
}

＆＃13;

<a class="project-thumb" href="ktc.html">
  <img class="thumb" src="http://dummyimage.com/150x150/aaaaaa/aaaaaa&text=."><!-- 
  mind this white space  for inline-block elements, comment erase it
  --><h3 class="thumb-title">
      Sample text</h3>
</a>
 

<a class="project-thumb" href="ktc.html">
  <img class="thumb" src="http://dummyimage.com/150x150/aaaaaa/aaaaaa&text=."><!-- 
  mind this white space  for inline-block elements, comment erase it
  --><h3 class="thumb-title">
      2 lines <br/> of text</h3>
</a>

＆＃13;

编辑：看起来您在评论灵活方框时评论了另一个答案？这里是一个灵活的版本，但只能猜测你的真实布局＆amp; CSS

＆＃13;

.project-thumb,
.project-thumb h3 {
  display: inline-flex;
  position: relative;
  width: 150px;/* thumb's width */
  box-sizing: border-box;/* if you add borders or padding*/
  color: initial;
  justify-content:center;
}
.thumb {
  margin-right: -150px;/* reduce virtually width to 0 to pull text */
}
.thumb-title {
  z-index: 1;/* make sure it stands on top of img*/
  margin:auto 0;
}

＆＃13;

<a class="project-thumb" href="ktc.html">
  <img class="thumb" src="http://dummyimage.com/150x150/aaaaaa/aaaaaa&text=."><!-- 
  mind this white space  for inline-block elements, comment erase it
  --><h3 class="thumb-title">
      Sample text</h3>
</a>
<a class="project-thumb" href="ktc.html">
  <img class="thumb" src="http://dummyimage.com/150x150/aaaaaa/aaaaaa&text=."><!-- 
  mind this white space  for inline-block elements, comment erase it
  --><h3 class="thumb-title">
      2 lines <br/> of text</h3>
</a>

＆＃13;

Answer 2

您需要使用text-align: center;上的.project-thumb和left: 50%;规则transform: translate(-50%,-50%); .thumb-title规则：

＆＃13;

.project-thumb {
  position: relative;
  display: inline-block;
  text-align: center;
}
.thumb-title {
  font: 400 1.5rem'Lato', sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding:0;
  margin: 0;
}

＆＃13;

<li>
  <a class="project-thumb" href="ktc.html">
    <img class="thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfUCAwWIxZtCx0SAAAAHXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBUaGUgR0lNUO9kJW4AAAInSURBVHhe7dXRCcMwEAXBU/rvWXZw4o/gbAUzcEgNLG/NzD4PePD6vMCDe0H2NiTwtdY7DQsCSSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJBIBAEAkEgEAQCQSAQBAJhnbevL/DLgsBfMwfCIgeLDnhUYwAAAABJRU5ErkJggg==">
    <h3 class="thumb-title">Sample text</h3>
  </a>
</li>

＆＃13;

Answer 3

感谢您的帮助！经过测试的点点滴滴，以及对我有用的东西：

HTML：

<li>
    <a class="project-thumb" href="ktc.html">
        <img class="thumb-img" src="thumbs/thumb-201612t-ktc.jpg">
        <h3 class="thumb-title">Sample text</h3>
   </a>
</li>

CSS：

.thumb-project {
display: inline-block;
position: relative;
}

.thumb-img {
width: 100%;
height: auto;
}

.thumb-title {
font: 400 1.2rem 'Lato', sans-serif;
position: absolute;
width: 100%;
bottom: 50%;
text-align: center;
opacity: 0;
}

如何在<a> tag?

3 个答案: