时间戳

首页 > 解决方案 > 如何垂直对齐div中的内容

html - 如何垂直对齐div中的内容

问题描述

我正在努力将内容垂直居中。这是一个屏幕截图：

在此处输入图像描述

我需要一个浮动左侧，因为在您看不到的一侧会有更多内容，但是是的，我怎样才能让这个文本垂直居中？我也不确定我是否需要一个

标签中的标签

.newsletter_text_section {
  width: 40%;
  float: left;
  padding: 15px;
    font-size:24px;
    padding-right: 0 !important;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.newsletter_text_section p {
    font-size:24px !important;
      display: inline-block;
  vertical-align: middle;
}

<!-- newsletter section -->

<div class="newsletter_section">

<div class="newsletter_text_section">
<p>Join Balance and get 20% off your first order</p>
</div>

<div class="newsletter_gif_section">
...
</div>

<div class="newsletter_input_section">
...
</div>
    
</div>

标签： htmlcss

解决方案

为了解决这个问题，更快的方法是为元素设置相同height的像素line-height。像这样：

.box{
  height : 10vh;
  line-height: 10vh
}

否则，您还可以display: flex在范围内布局页面，flex您可以使用align-item 垂直对齐元素，如下所示：

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

更详细的信息，你可以参考这里。

下一个方法是调整padding到您的父元素，因为您正在使用该percent单元，但我不推荐这种方式，因为它有时存在副作用。

以上内容就是我现在的想法，希望对你有帮助。

推荐阅读