Materialise 卡片中的垂直对齐卡片内容

Question

我只是想垂直对齐卡片中的文本，而不影响其他任何内容。你可以在这里看到我在做什么：Working example

我的代码非常简单：

<body>
  <div class="container">
    <div class="row top-pad">
      <div class="col s4">
        <%= image_tag "logo.png", class:"responsive-img" %>
      </div>
  </div>
    <img class="responsive-img" src="cool_pic.jpg">

  <div class="container vert-align">
      <div class="row">
        <div class="col s4 offset-s4">
          <div class="card medium">
            <div class="card-image">
              <%= image_tag "hi2.png" %> 
              <!--<span class="card-title">Card Title</span>-->
            </div>
            <div class="card-content">
              <p>Welcome to FBA Shipping by ByteStand.
                A super simple way to automate fulfilling FBA items
                in the US and abroad.</p>
            </div>
            <div class="card-action">
              <button class="waves-effect btn stroke-btn">Let's Get Started!</button>
            </div>
          </div>
        </div>
      </div>
  </div>
</body>

我到处都试过 valign-wrapper 并且 vert-align 都无济于事。

这也是我的全部 CSS：

.vert-align {
  margin: 0px;
    padding: 0px;
    float: left;
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    left: 50%;
}

.stroke-btn {
  background-color: white !important;
  border-style: solid;
  border-width: 1px;
  border-color: #311b92;
  color: #311b92 !important;
}

.top-pad {
  padding-top: 20px;
}

.card { 
    max-width: 400px;
    overflow: hidden; 
}

.custom-align .card {
  display: flex;
  flex-direction: column;
}

.custom-align .card-content {
  flex: 1;
  max-height: 100% !important;
  align-items: center;
  display: flex;
  margin-bottom: 50px;
}

Answer 1

您可以将自定义 class 添加到容器中（例如将 vert-align 替换为 custom-align），然后通过添加此 CSS 代码尝试 flex：

.custom-align .card {
  display: flex;
  flex-direction: column;
}

.custom-align .card-content {
  flex: 1;
  max-height: 100%;
  align-items: center;
  display: flex;
  margin-bottom: 50px;
}

我不确定页面的剩余 CSS，因此如果它不起作用，您可以添加更多说明或使用 important

Materialise 卡片中的垂直对齐卡片内容

Vertical align card-content in Materialize card

html

css

vertical-alignment

materialize