Question

我有一个以三角形（箭头）结尾的横幅，该横幅必须保持居中，与其下方的幻灯片重叠。它将接受的文本/内容量可以动态增长。有没有办法对其进行设计，以便随着文本的增加，箭头将保持居中，如下所示。下面是我必须获得下面截图的样式。

<div className="carousel">
    <div className={headerClass}>
        <h1>{headerText}</h1>
        <h3>{this.props.subTitle}</h3>
    </div>
    <div className="slideShow">
        <div>
            <div ref="wrapper" className="master-slider ms-skin-default" data-qa={thisName + '_masterslider'}>
                {slides}
            </div>
        </div>
    </div>
</div>

React Component HTML：

{headerClass} = .header或.headerWithTag，具体取决于是否有字幕（h3标签）。

{{1}}

Answer 1

因此解决方案是使用top:0; transform: translate(0, -50%)将标题从幻灯片顶部向上移动一半高度：

.header {
    position: absolute;
    top: 0;
    transform: translate(0,-50%);
    left:0;
    z-index: 1000;
    background-color:#81C3C4;
    color:white;
    font-family:Lato;
  }

  .headerWithTag {
    position: absolute;
    top: 0;
    transform: translate(0,-50%);
    left:0;
    z-index: 1000;
    background-color:#81C3C4;
    color:white;
    font-family:Lato;

    &:after{
      content: "";
      background: url(/img/styleguide/masterslider/h1_right_top.svg) no-repeat;
      background-size: contain;
      position: absolute;
      top: 0;
      left: 100%;
      width: 100%;
      height: 100%;

    }
  }

快速演示：http://jsfiddle.net/7ky4wvz6/1/

CSS / LESS允许内容增长，同时保持div垂直居中

1 个答案: