Question

在我的布局中，我正在尝试输出php生成的项目。从数据库中检索的每个项目都有标题，图像和描述。

我正在尝试生成一个布局，其中包含一个由img作为背景组成的缩略图标题（css样式border-radius：50％），标题作为横幅居中，并占据整个宽度。但是在绝对定位的 div.title 中心通过顶部边缘使用前50％， div.title 的高度取决于字体大小。

我想知道是否有一种方法可以完美地居中标题，同时保持边界半径效果，考虑到唯一的实际已知尺寸是 div.item 的宽度和所有高度数据最终由 .thumbnail-wrapper img 和 .title ＆lt; font-size

决定

html是

<div id="container">
  <div class="item">
    <div class="thumbnail-wrapper">
      <img />
      <div class="title">Title</div>
    </div>
    <div class="content">Content</div>
  </div>
</div>

CSS

#container {
    width: 600px;
}

.item {
    position: relative;
    display: inline-block;
    width: 50%;
}

.thumbnail-wrapper {
    text-align: center;
    position: relative;
}

.thumbnail-wrapper img {
    border-radius: 50%;
}

.title {
    width: 100%;
    position: absolute;
    top: 50%; /* this is the problem */
}

谢谢！

JSFiddle example

Answer 1

尝试使用此CSS来定位绝对定位的元素（即将其添加到div.title）：

/* centering css */
   top: 50%;
   left:50%;
   -webkit-transform:translate(-50%,-50%);
   transform:translate(-50%,-50%);

Updated your JSFiddle Demo

Reference

当子元素的高度未知时，如何将绝对定位的元素置于其父元素中

1 个答案: