Html 垂直对齐div中的项目和文本_Html_Css_Vertical Alignment

Html 垂直对齐div中的项目和文本

html css

Html 垂直对齐div中的项目和文本,html,css,vertical-alignment,Html,Css,Vertical Alignment,我尝试过在div中垂直对齐文本的解决方案，但由于有些句子在一行上，而有些句子在两行上。我没有找到一个既适合两者的解决方案这是我的代码： .gridinstanttrack{ 显示：网格；网格模板柱：1fr 3fr；网格模板行：1fr；边缘底部：30px； } .gridinstanttrack1{ 网格列开始：1；网格柱端：2；网格行开始：1；网格行端：2；保证金：自动； } 完全了解您的整个装运活动简化与供应商、供应商等的沟通强大的交钥匙分析功能，可做出更好的决策您可

我尝试过在div中垂直对齐文本的解决方案，但由于有些句子在一行上，而有些句子在两行上。我没有找到一个既适合两者的解决方案

这是我的代码：

.gridinstanttrack{
显示：网格；
网格模板柱：1fr 3fr；
网格模板行：1fr；
边缘底部：30px；
}
.gridinstanttrack1{
网格列开始：1；
网格柱端：2；
网格行开始：1；
网格行端：2；
保证金：自动；
}


完全了解您的整个装运活动
简化与供应商、供应商等的沟通
强大的交钥匙分析功能，可做出更好的决策

您可以使用flex属性以最简单的方式实现相同的功能。下面是相同的代码

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>

.gridinstanttrack {
  display:flex;
  align-items:center;
}

.gridinstanttrack1 {
    flex-basis: 15%
}
.gridinstanttrack2{
    flex-basis: 85%
}
</style>
</head>
<body>

<div class="gridinstanttrack">
  <div class="gridinstanttrack1">
    <img src="https://static1.squarespace.com/static/5c70ef0816b6403c514efd96/t/5fb14514e741ef42c92e7f63/1605453076915/baseline_wifi_white_18dp.png">
  </div>
  <div class="gridinstanttrack2">
    <h3 style="color: black">
      Complete visibility into your entire shipment activity
    </h3>
  </div>
</div>
<div class="gridinstanttrack">
  <div class="gridinstanttrack1">
    <img src="https://static1.squarespace.com/static/5c70ef0816b6403c514efd96/t/5fb14514e741ef42c92e7f63/1605453076915/baseline_wifi_white_18dp.png">
  </div>
  <div class="gridinstanttrack2">
    <h3 style="color: black">
      Streamlined communication with vendors, suppliers, and more
    </h3>
  </div>
</div>
<div class="gridinstanttrack">
  <div class="gridinstanttrack1">
    <img src="https://static1.squarespace.com/static/5c70ef0816b6403c514efd96/t/5fb14514e741ef42c92e7f63/1605453076915/baseline_wifi_white_18dp.png">
  </div>
  <div class="gridinstanttrack2">
    <h3 style="color: black">
      Powerful turn-key analytics to make better decisions
    </h3>
  </div>
</div>

</body>
</html>


页面标题
.gridinstanttrack{
显示器：flex；
对齐项目：居中；
}
.gridinstanttrack1{
弹性基准：15%
}
.gridinstanttrack2{
弹性基准：85%
}
完全了解您的整个装运活动
简化与供应商、供应商等的沟通
强大的交钥匙分析功能，可做出更好的决策

您是否尝试过“垂直对齐”？