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

Question

我仍在学习 html 和 css，所以请保持温和，但我无法将文本集中在每个单独的图像容器（http://jsbin.com/uwolat/1/edit）上。我已经尝试将 top 和 height 设置为 50%，但它并没有限制到特定的父容器。任何帮助将不胜感激！

Answer 1

这是演示http://jsfiddle.net/yyene/7bc7j/1/

给.imgTitle你所有的标题p标签一个类。所有这些都不需要单独的ID。

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

查询

$(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;
}