Html Question posted in
Some basic documentation can be found here.

Html – How to vertically align text and image with the bottom elements in CSS?

I am working on a layout where I have some text on the left side and an image on the right side. Below them, I have three smaller images. I want to align the left text and the right image so that they both vertically align with the bottom images.

Here is my current layout:

As you can see in the image:

• The text on the left is higher than the bottom images.
• The large image on the right is also higher than the bottom images.

What I want to achieve:

• I want the text on the left to be vertically aligned with the bottom images.
• I also want the large image on the right to be vertically aligned with the bottom images.
• The gap between the text and the image should be exactly 160px.

I’ve tried adjusting the margins and padding, but I haven’t been able to get the alignment correct. What would be the best approach in CSS to achieve this alignment?

I’ve created a Fiddle to demonstrate the issue: https://jsfiddle.net/fptL74bx/
I think the necessary adjustments need to be made in the following section of the CSS code in fiddle.

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

enter image description here

Tags:

2

Answers


  1. 0

    i add this line to css in your jsfillde

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

    and also removed p height.

    Login or Signup to reply.
  2. 0

    You can try this to make the text move left and the image move right:

    justify-content: space-between;

    And to add space between the text and image you can use the gap property

    gap: 160px;

    Your code should look like this

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

    I hope this solution addresses your issue. If not, please feel free to provide more details or clarify your question further.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search