Question

我意识到这样的问题已被提出并得到回答;我在多个网站上搜索过，但找不到我能为我工作的解决方案。我需要将文本垂直居中以达到未知的高度;我尝试过伪元素和不同的显示类型，包括表格和表格单元格（仍然在我的CSS中）。

您可以查看my site获取当前结果。

JSFiddle中的代码略有改动，但实际代码如下。另外，我注意到JFiddle代码看起来与我在我的网站上得到的结果不同。相同的代码，但JFiddle版本没有文本对齐中心。也许其他一些css或jquery正在帮助我的网站代码。

实际代码：

<div class="pinbin-image">
 <div class="rollover-item">
 <div id="hover">
 <div class="link-text">
 <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
 </div>
 </div>
 <a href="<?php the_permalink() ?>"><?php the_post_thumbnail( 'summary-image' );  ?></a>
 </div>
 </div>

CSS：

#post-area .pinbin-image {
 display:inline-block;
}
.rollover-item {
 position:relative;
 overflow:hidden;
}
#hover {
 transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
 opacity: 0;
}   
#hover {
 background-color: #fff;
 position: absolute;
 text-align: center;
 vertical-align: middle;
 text-decoration: none;
}
#hover { height: 90%; left: 6.38%; top: 4.8%; width: 87%; } 
#hover:hover { opacity: 0.75; }
.link-text {
 position: absolute;
 text-align: center;
 vertical-align: middle;
 display: table;
}

.link-text h2 a:link {
 color: #333333;
 font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
 font-size: 23px;
 line-height: 23px;
 text-decoration: none;
 padding: 20% 20px;
 width: 100%;
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}
.rollover-item:hover .description {
 top:0;
}

Answer 1

table和table-cell对我来说很好。

HTML：

<div id="parent">
    <span id="child">vertically centered</span>
</div>

CSS：

#parent {
    height:100%;
    display: table;
}

#child {
    display: table-cell; 
    vertical-align: middle;
}

您可能无法将链接定位为绝对

在JSFiddle中尝试以下内容。

CSS：

#post-area .pinbin-image {
   display:inline-block;
}
.rollover-item {
    position:relative;
    overflow:hidden;
}
#hover {
        transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -webkit-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        opacity: 0;
    }

    #hover {
        background-color: #fff;
        position: absolute;
        text-align: center;
    vertical-align: middle;
    text-decoration: none;
    }
    #hover { padding:50% 0; left: 6.38%; top: 4.8%; width: 87%; display:table;} 
    #hover:hover { opacity: 0.95; }
.link-text {
    position: static;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    }

.link-text h2 a:link {
    color: #333333;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-size: 23px;
    line-height: 23px;
    text-decoration: none;
    padding: 20% 20px;
    width: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.rollover-item:hover .description {
    top:0;
}

HTML：

<div class="pinbin-image">
    <div class="rollover-item">
        <img src="http://neoqueenhoneybee.com/blog/wp-content/uploads/2014/03/1381568_549239698487215_587096537_n-750x561.jpg" alt=""/>
            <div id="hover"> 
                <div class="link-text">
                    <h2><a  href="<?php the_permalink() ?>">Pokemon: Snivy</a></h2>
                </div>
            </div>
            <a href="<?php the_permalink() ?>"><?php the_post_thumbnail( 'summary-image' );  ?></a>
    </div>
</div>

顺便说一句。你的代码很难阅读。尽量不要重复相同的选择器。

-

从这里开始：http://www.vanseodesign.com/css/vertical-centering/

向下滚动到：CSS Table Method

使用未知高度问题居中文本

1 个答案: