Question

我设法将div中的文本垂直居中，但它仍然不存在 - 我希望它能够完善。

主要是诀窍的关键CSS就是这个（我已经包含了我找到解决方案的URL）：

body.page-template-template-portfolio .caption,
body.single-portfolio .caption {
    top: 0;
    left:0;
    right: 0;
    bottom: 0;
    visibility: hidden;
    opacity: 0;
    border-bottom: none;

    /* THE MAGIC (http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/)  */  
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

}

body.page-template-template-portfolio .fancybox-thumb a {
        text-align: center;
}

以下是这种情况的一个小问题（我已经从我的WordPress主题中添加了足够的CSS来使其表现得像在我的网站上一样）：

https://jsfiddle.net/cosmocanuck/ukro9qfv/41/

正如你可以看到的那样，在悬停时，标题有点高，因为p.captionTitle浮动到其封闭的.caption div的顶部，它完全垂直居中。但是当我尝试添加它时，也要将内部div垂直居中：

p.captionTitle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

奇怪的是，虽然它似乎垂直地完成了这项工作，但是现在 - 如果标题只有一行，则文本是左对齐的，并且只有在有两条线的情况下它才会保持水平居中。那是什么意思？

希望有人可以提出建议......谢谢！

亚当

Answer 1

从float选择器中删除height和.folio-grid .caption css属性。 float定位时absolute过多，margin移除默认p，top: 0; bottom: 0属性也是额外的。

html {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0
}

p {
  font-family: Arial, sans-serif;
  font-weight: bold;
}

.folio-grid {
  list-style: none;
  float: left;
  z-index: 8;
  overflow: visible !important;
}

.folio-grid li {
  margin: 60px 17px 0;
  float: left;
}

.fancybox-thumb img {
  margin: 0 !important;
  float: none !important;
  vertical-align: top;
}

.folio-grid img {
  border-radius: 50%;
  width: 100%;
  max-width: none;
}

.folio-grid span {
  font-size: 12px;
  line-height: 16px;
  display: inline-block;
  font-weight: 500;
  color: #656565;
}

.fancybox-thumb {
  display: inline-block;
  position: relative;
}

.fancybox-thumb span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}


/* VERTICALLY CENTER THE ROLLOVER PORTFOLIO TITLES  */

.folio-grid .caption {
  padding: 19px 0 19px;
  text-align: center;
}

.caption {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 1em !important;
}

p.captionTitle {}


/* ROLLOVER CAPTIONS INSIDE THE THUMBNAILS (also changed order of HTML elements in template-portfolio.php)  */

.caption {
  left: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  border-bottom: none;
  padding: 19px 0 19px;
  /* THE MAGIC (http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/)  */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.fancybox-thumb a {
  text-align: center;
}

.fancybox-thumb:hover .caption,
.fancybox-thumb:hover .caption {
  visibility: visible;
  opacity: 1;
  background-color: transparent !important;
}


/* Keep everything transparent */

.fancybox-thumb .caption,
.fancybox-thumb .caption p,
.fancybox-thumb .caption span {
  background-color: transparent !important;
}

.fancybox-thumb:hover .caption p {
  background-color: transparent !important;
}

.fancybox-thumb:hover .caption span {
  background-color: transparent !important;
}


/* Text colour and stylin' */

.caption p {
  color: white;
  margin: 0;
}

.fancybox-thumb .caption span {
  font-family: 'Helvetica Neue LT W01_71488914';
  font-size: 1.2em;
  color: white;
}

<ul id="portfolio" class="folio-grid cthree clearfix">

  <li class="item">

    <a href="http://unicyclecreative.com/unicycle/portfolio/rebrand-a-better-coatings-company-broda-wood-stain/?id=1689" class="clearfix">

      <div class="fancybox-thumb">
        <img src="http://unicyclecreative.com/unicycle/wp-content/uploads/2016/02/portfolio-circle-BRODA-275x275.jpg" width="275" height="275" alt="Rebrand a better coatings company: BRODA Wood Stain" />
        <span></span>

        <div class="caption">
          <p class="captionTitle">Rebrand a better coatings company: BRODA Wood Stain</p>
        </div>

      </div>

    </a>
  </li>

  <li class="item">

    <a href="http://unicyclecreative.com/unicycle/portfolio/london-drugs-whats-the-green-deal-4/?id=1689" class="clearfix">

      <div class="fancybox-thumb">
        <img src="http://unicyclecreative.com/unicycle/wp-content/uploads/2016/02/portfolio-circle-GreenDeal-275x275.jpg" width="275" height="275" alt="London Drugs What&#8217;s the Green Deal?" />
        <span></span>


        <div class="caption">
          <p class="captionTitle">London Drugs What&#8217;s the Green Deal?</p>
        </div>


      </div>


    </a>

  </li>
</ul>

垂直居中＆＃34;几乎＆＃34;那里 - 寻求完美

1 个答案: