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

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

＆＃13;

.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;
}

＆＃13;

我不确定页面的剩余CSS，因此如果它不起作用，您可能会添加更多的特定或使用重要的

Materialise卡中的垂直对齐卡内容

1 个答案: