如何在CSS中将文本和图像与底部元素垂直对齐?

问题描述 投票:0回答:2

我正在开发一个布局,其中左侧有一些文本,右侧有一个图像。在它们下面,我有三个较小的图像。我想对齐左侧文本和右侧图像,使它们都与底部图像垂直对齐。

这是我当前的布局:

如图所示:

• 左侧的文字高于底部图像。
• 右侧的大图像也高于底部图像。

我想要实现的目标:

• 我希望左侧的文本与底部图像垂直对齐。
• 我还希望右侧的大图像与底部图像垂直对齐。
• 文本和图像之间的间隙应恰好为 160 像素。

我尝试过调整边距和填充,但无法正确对齐。 CSS 中实现这种对齐的最佳方法是什么?

我创建了一个小提琴来演示这个问题:https://jsfiddle.net/fptL74bx/ 我认为需要在fiddle中的CSS代码的以下部分中进行必要的调整。

.intro {
  display: flex;
  padding-top: 160px;
  justify-content: center;

enter image description here

html css layout flexbox
2个回答
0
投票

我将此行添加到 jsfillde 中的 css 中

 .description{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
 .main {
   background-color: green;
   padding: 0 55px;
 }  
.section {
    display: flex;
    width: 100%;
    gap: 40px;
    justify-content: space-between;
    padding-bottom: 160px;
}

并且还删除了 p 高度。


0
投票

您可以尝试这样做,使文本向左移动,图像向右移动:

justify-content: space-between;

要在文本和图像之间添加空格,您可以使用

gap
属性

gap: 160px;

你的代码应该是这样的

.intro {
  display: flex;
  padding-top: 160px;
  justify-content: space-between;
  gap: 160px;

我希望这个解决方案能够解决您的问题。如果没有,请随时提供更多详细信息或进一步澄清您的问题。

© www.soinside.com 2019 - 2024. All rights reserved.