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

how to vertically align two items on top of each other using html and css

I am trying to put two images on top of each other and make them align properly to form a house shaped object. One of the images is a square and the other one is a triangle. The triangle has to be on top and the square has to be at the bottom.

This is the HTML code:

<div class="heading">
    <h2><span class="bold_text">RENT</span><span class="light_text">HOMES</span></h2>
    <div class="house">
        <img src="./img/house_top.svg" alt="house top">
        <img src="./img/house_bottom.svg" alt="house bottom">                        
    </div>
</div>

This is the CSS code:
`.heading {
display: flex;
}

.heading .house {
    display: grid;
    height: 25px;
    width: auto;
    margin: 0;
    padding: 0;
    gap: 0;
}`

This is what I am trying to achieve:
figma picture

I used "grid" to align the images on top of each other. And I also set the "padding" and "margin" to 0. But still there is space between the two images and they are not vertically aligned in a straight line. This is how it looks like right now.
my code so far

Code for the triangle SVG image:

<svg width="33" height="24" viewBox="0 0 33 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_174_86)">
<path d="M16.5 0L28.1913 15.75H4.80866L16.5 0Z" fill="#D9D9D9"/>
<path d="M5.80251 15.25L16.5 0.838871L27.1975 15.25H5.80251Z" stroke="#475C46"/>
</g>
<defs>
<filter id="filter0_d_174_86" x="0.808594" y="0" width="31.3828" height="23.75" filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_174_86"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_174_86" result="shape"/>
</filter>
</defs>
</svg>

Code for the square SVG image:

<svg width="29" height="30" viewBox="0 0 29 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_174_87)">
<rect x="4" width="21" height="22" fill="#D9D9D9"/>
<rect x="4.5" y="0.5" width="20" height="21" stroke="#475C46"/>
</g>
<defs>
<filter id="filter0_d_174_87" x="0" y="0" width="29" height="30" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_174_87"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_174_87" result="shape"/>
</filter>
</defs>
</svg>
Tags:

3

Answers


  1. 0

    You can adjust the CSS for the images to remove any default spacing and ensure proper alignment.

    .heading {
    display: flex;
    align-items: center; /* Vertically center items */
}

.heading .house {
    display: grid;
    height: 25px;
    width: auto;
    margin: 0;
    padding: 0;
    gap: 0;
}

.heading .house img {
    display: block; /* Ensure images behave as blocks */
    height: 100%; /* Make images fill the height of their container */
    width: auto; /* Allow width to adjust automatically */
}
    Login or Signup to reply.
  2. 0

    Firstly, I would recommend SVG format for this kind of shape, you can download together this icons in figma, if you wanna do this manually, you can achieve with several ways in css

    1. Remove any spaces from icons (margin,padding,gap)
    2. you can use position relative for parent div, and top bottom properties for icons
    Login or Signup to reply.
  3. 0

    I tried solving your problem using the "display: flex" property.

    The images that I used are different from yours that’s why you will
    see a gap between the triangle image and the square image.

    Here is the link for the solution:
    Codepen

    Hope this helps, thanks 🙂

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

Back To Top
Search