JQUERY

Question

我还在学习html和css所以请保持温和，但我无法将文本集中在每个单独的图像容器（http://jsbin.com/uwolat/1/edit）上。我已尝试顶部和高度为50％，但它不限制特定的父容器。任何帮助将不胜感激！

Answer 1

以下是DEMO http://jsfiddle.net/yeyene/7bc7j/1/

为您的所有标题.imgTitle标记提供课程p。不需要为所有人提供单独的身份证。

以下脚本将所有文本垂直/水平对齐，适用于任何文本宽度，长或短。

JQUERY

$(document).ready(function() {
    $('.img-container').each(function() {
        // Get a reference to the image.    
        var img = $(this).find('img');
        var p = $(this).find('.imgTitle');

        // center the title
        $(this).children('p.imgTitle').css({
           'top':((img.height() - p.height())/2) - 13,
           'left':(img.width() - p.width())/2
        });

        // Hide by default.
        img.hide();

        $(this).hover(function() {
            img.stop().fadeIn(50);
        }, function() {
            img.stop().fadeOut(1300);
        });

    });
});

HTML

<div class="img-container">
  <img src="http://wallpaper-fun.ophibian.com/wallpapers/wallpaper_08.jpg" alt="a" width="100%" height="200" />   
  <p class="imgTitle">Pure Waves</p>  
</div>

Answer 2

尝试设置

位置：相对; 文本对齐：中心;

为您的文字

Answer 3

诀窍在line-height

的 LIVE DEMO

不要重复自己，从p元素中删除所有不需要的ID。
为您的<p>元素提供课程：<p class="description">Bla bla bla</p>

<强> CSS：

.img-container { /*display: block;*/ /* DIV is already BLOCK level element*/ /*float: inline;*/ /* Back to school ;) */ margin:0; width: 100%; height: 200px; line-height:185px; /* PLAY HERE */ background: #e5e5e5; border-bottom:1px solid #444; /* added just for demo */ text-align:center; /* to align inner P text */ } .description { position: absolute; width:100%; /*height:200px;*/ /* if needed? */ color: #000; font-family: 'Open Sans', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; font-size: 13px; }

在img容器上垂直/水平居中文本

3 个答案:

JQUERY

HTML