如何在响应容器中垂直和水平居中文本

Question

如何在响应（引导）容器中纵向和横向居中文本？ 我一直在玩各种表格和表格单元格显示方法，但无法正常工作。

这是html，我试图将span标记的内容集中在图像上。

• 我需要图像来控制容器高度的大小，没有它，容器就会折叠到线的高度。
• 我无法在div＆gt; div＆gt; div上设置静态高度，因为它会随浏览器大小/视图缩放。

HTML

<div class="row  media-thumbs">
    <div class="col-sm-4 col-xs-12">
        <div>
            <span>Some copy should go here</span>
            <a href="#">
                <img class="img-responsive" src="default-tile.gif">
            </a>
        </div>
    </div>
</div>

工作代码

借助Alexander的帮助/线索，我修改了插件（https://github.com/PaulSpr/jQuery-Flex-Vertical-Center）以获得正确的宽度和高度

(function( $ ){

    $.fn.flexVerticalCenter = function( onAttribute ) {

        return this.each(function(){

            var $this       = $(this);              // store the object
            //var attribute = onAttribute || 'margin-top'; // the attribute to put the calculated value on
                //alert($this.css('padding-top'));
            // recalculate the distance to the top of the element to keep it centered
            var resizer = function () {
                // get parent height minus own height and devide by 2
                $this.css({
                    'margin-top' : ((( $this.parent().height() - $this.height() ) / 2) - parseInt($this.css('padding-top')) ),
                    'width' : ($this.parent().width())
                });
            };

            // Call once to set.
            resizer();

            // Call on resize. Opera debounces their resize by default. 
            $(window).resize(resizer);

            // Apply a load event to images within the element so it fires again after an image is loaded
            $this.find('img').load(resizer);

        });

    };

})( jQuery );

Answer 1

JSFiddle

<强>解释

CSS ：

span
{
    position: absolute;  /* this makes the text able to be placed over the image without getting pushed over */
    width: 100%; /*set to 100% so text-align will fall in the center of the image*/
    text-align: center; /*text will be horizontally centered in the image*/
    color: white; /*purely aesthetic*/
}

img
{
    width: 100%;   /* The image is set to 100% to take up the container and be responsive */ 
}

的Javascript ：

我使用了一个名为Flex Vertical Center（also available in vanilla javascript）的jQuery插件来垂直居中<span>，因为CSS可能是不可思议的麻烦。 在HTML中包含javascript源代码后，以下代码简单调用了函数：

$('span').flexVerticalCenter();

Answer 2

使用text-align: center水平居中，您可以尝试vertical-align: middle（认为有一些垂直对齐的陷阱），或者设置line-height等于父容器高度。

Answer 3

根据外部元素样式，对于要水平居中设置的元素，一种非常有效的方法是margin: 0 auto;。 此方法需要父元素的已定义宽度。 正如Sean所说，text-align:center;在大多数情况下都会起作用，但vertical-align:middle;需要对父元素进行大量的CSS工作。我尝试不使用它，它从未按预期工作，从头开始:-)我记得，如果父元素设置为定义的高度，display:table-cell;它可以工作，否则不行。