带有文本对齐 x = 中心 y = 中心的简单横幅滑块，不起作用答案

【问题标题】：simple banner slider with text align x =center y = center, does not work带有文本对齐 x = 中心 y = 中心的简单横幅滑块，不起作用
【发布时间】：2015-02-24 23:32:14
【问题描述】：

我想用旋转滑块版本 jquery 创建一个滑块，在这个滑块中我想比较一个带有测试 + 背景文本颜色的横幅：

如果您注意到文本没有垂直居中对齐

但我不明白，因为在平板电脑和 mozilla 中视图很好（文本是等距 x=center ，y=center），而在 chrome 和 safari 上看不到它们排列。

我也测试了更改 css，但结果与 safari 和 chrome 的结果相反，而与 mozilla 的结果相反。

这是一个简单的滑块代码

        <ul>
    <li data-transition="turnoff" data-slotamount="1" data-masterspeed="600"><img alt="lightsplash24" src="{{media url="wysiwyg/trego/homepage_slider/slider5/dummy.png"}}" data-lazyload="{{media url="wysiwyg/AA-lecolart-slider-last.jpg"}}" />
    <div class="tp-caption modern_small_text_dark randomrotate" data-speed="600" data-x="center" data-y="center" data-start="1400" data-easing="easeOutExpo">
    <div class="morius">THIS IS A TEXT OF BANNER</div>
    </div>
    </li>
<ul>

1 ) 我在这个 css 之前使用过（有了这个，结果对 mozialla 有好处，但对 chrome 不利

@font-face {
    font-family: font-one;
    src: url(../fonts/Bellerose.ttf);  /* check this */
}

    .tp-caption.modern_small_text_dark{


        -webkit-box-sizing: content-box;
          -moz-box-sizing: content-box;
          box-sizing: content-box;
        height: 130px;

          overflow: hidden;
          border: none;
        font: normal 53px/1 "font-one", Times, serif;
          padding: 20px;
          color: rgba(255,255,255,1);
          text-align: center;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          background: #111111;
          -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ;
          box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ;
          text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;   
        vertical-align: middle;}

2）我也使用了这个 css（这在 chrome 上很好，但在 safari 上很糟糕）

@font-face {
    font-family: font-one;
    src: url(../fonts/Bellerose.ttf);  /* check this */
}





.morius {
font-family: font-one;
position: relative;
top: 50%;
transform: translateY(-50%);
background: black;
font-size: 53px!important;
height: 100px;
line-height: 120%;
padding-bottom: 15px;
}

如何获得适用于所有浏览器的唯一代码，以便在黑色框中对齐文本？？

如图所示

【问题讨论】：

标签： html css revolution-slider

【解决方案1】：

首先删除高度。因为旋转滑块会放置您的 div 的高度。
通过填充固定您的身高。
无需使用溢出隐藏。
文本无需居中对齐。

.tp-caption.modern_small_text_dark{ border: none; font: normal 53px/1 "font-one", Times, serif; padding: 40px 20px; color: rgba(255,255,255,1); background: #111111; -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ; box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ; text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ; }

【讨论】：