Question

我真的很难解决这个问题 - 我试图在悬停时出现在图像上的响应div中垂直和水平文本。

这里是基本HTML和CSS结构的jsfiddle。

Here's an example of what I'm attempting to do.

我尝试了许多不同的CSS方法 - 使用table（由于我使用absolute将文字放在图片上方，transform: translate(-50%, -50%); top: 50%; left: 50%;无法正常工作{{1} 1}}抵消了文本，以及其他我此刻不记得的内容。

主要问题是我有两个＆＃34;层＆＃34; - 文本和它下面的图像。为此，我需要使用absolute导致table选项不起作用。

我非常感谢您提出的任何建议。

注意：我使用的图片必须保持16：9的宽高比。

谢谢！

Answer 1

http://jsfiddle.net/jruvcogm/

.work{
    display:table;
}    
.work a{
    position:relative;display:table;
}    
.work h1{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    margin:0;
    width:80%;
    text-align:center;
}    
.work img{
    width:800px;
    height:450px;
    display:block;
    max-width:100%;
}

Answer 2

使用纯css发布css代码，用于居中和/或verticaly内容（改编自我的responsive.css脚本）。包括对在线资源的引用。根据需要使用。注意您可能需要稍微调整html结构，以便包含一个包装器（请参阅注释）

/* center alignment classes */
/* http://www.dev-metal.com/center-div-vertically-horizontally-modern-method-without-fixed-size/ */
.center-vertical-wrapper
{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table;
}
.center-horizontal-wrapper
{
    margin: 0;
    padding: 0;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.center-h
{
    margin-left: auto;
    margin-right: auto;
}
.center-contents-h
{
    text-align: center;
}
/* http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/#Height */
.center-absolute /* needs width/height to be set */
{
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    float:left;
    margin: auto;
}
.center-transform /* needs width/height to be set */
{
    position: absolute;
    margin: auto;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}
/* http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/ */
.center-flexbox 
{
    display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
    display: -moz-box;      /* OLD: Firefox (buggy) */ 
    display: -ms-flexbox;   /* MID: IE 10 */
    display: -webkit-flex;  /* NEW, Chrome 21–28, Safari 6.1+ */
    display: flex;          /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */
    align-items: center;
    justify-content: center;

    margin: 0;
    height: 100%;
    width: 100% /* needed for Firefox */
}

Answer 3

我有一个有效的例子：https://jsfiddle.net/v1harbqm/7/

我基于@ gopalraju的小提琴。它在Safari中不起作用，但是display: table;的组合并为标题添加了高度。

修改：在标题中创建了<span>，以使其能够使用更长的文本。这次使用翻译，看起来Safari仍然需要-webkit-前缀，这可能是最初的问题。

无论如何，这是更新的：https://jsfiddle.net/v1harbqm/13/

响应div

3 个答案: