Question

有没有人想出如何在滑块（标题等）中居中对齐垂直内容？我试图使用valign-wrapper并按照指定进行操作，但它没有做任何事情。我还试图采用其他一些css技巧进行垂直中心对齐，但似乎没有任何效果。

HTML Slider：

extension Selectable
where Self: Generative, 
      Self.GeneratedType == NSIndexPath, 
      Self.SelectableType == NSIndexPath 
{
    func selectedIndices() -> [NSIndexPath] {
        return self.selectedElements.flatMap {
            self.elements.indexOf($0).map { NSIndexPath(index: $0) }
        }
    }
}

Answer 1

这对我有用

.slider .slides li .caption {
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)!important;}

我需要在再次阅读你的问题后指出，这个css将垂直对齐标题框。

Answer 2

试试这个：

按如下方式更改HTML：

<li class="valign-wrapper">
  <img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
  <div class="valign caption center-align">
    <h3>This is our big Tagline!</h3>
    <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
  </div>
</li>

添加CSS：

.slider .slides li .caption {
    position:relative;
    top: unset;
}

这对我有用，但我没有在不同的浏览器上测试它。虽然在Firefox上看起来不错。

Answer 3

下面将对齐元素的中心

    <li>
      <img src="https://lorempixel.com/580/250/nature/1"> <!-- random image -->
      <div class="center-align">
        <h3>This is our big Tagline!</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>

如何在滑块内垂直对齐

3 个答案: