首页 / 技术问答 / Html问答列表 / 问答详情

如何使用html和css将两个项目垂直对齐

我试图把两个图像放在彼此的顶部，并使它们适当地对齐，形成一个房屋形状的物体.其中一个图像是正方形，另一个是三角形.三角形必须在顶部，正方形必须在底部.

这是HTML码:

<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>

这是一段css代码: `.标题{ 显示:Flex； }

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

这就是我正在努力实现的目标: figma picture个

我使用"网格"将图像彼此对齐.我还将"填充"和"边距"设置为0.但两幅图像之间仍然有空间，它们并不是垂直对齐在一条直线上.这就是现在的情况. my code so far个

三角形SVG图片代码:

<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>

正方形SVG图像的代码:

<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>

推荐答案

这段代码说明了这个问题.我在图像周围添加了边框，这样我们就可以看到它们的局限性.注意这些图像上的投影.所以图像比形状大，以适应这些阴影.(我还使用了一个flexbox容器，而不是网格.

enter image description here

.heading {
  display: flex;
  gap: 1em;
  align-items: end;
}

.heading h2 {
  margin: 0;
}

.heading .house {
  display: flex;
  flex-direction: column;
}

.heading .house svg {
  border: 1px solid red;
}
<div class="heading">
  <h2><span class="bold_text">RENT</span><span class="light_text">HOMES</span></h2>
  <div class="house">
    <svg width="33" height="24" viewBox="0 0 33 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <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>
      <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>
    </svg>
    <svg width="29" height="30" viewBox="0 0 29 30" fill="none" xmlns="http://www.w3.org/2000/svg">
      <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>
      <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>
    </svg>
  </div>
</div>

因此，我们需要调整头寸.首先，将柔体容器设置为align-items: center将使它们水平对齐.然后使用position: relative，并调整每个图像的top值，直到您的对齐看起来很好.

enter image description here

.heading {
  display: flex;
  gap: 1em;
  align-items: end;
}

.heading h2 {
  margin: 0;
}

.heading .house {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.heading .house svg:first-child {
  position: relative;
  top: 13px;
}

.heading .house svg:last-child {
  position: relative;
  top: 4px;
}
<div class="heading">
  <h2><span class="bold_text">RENT</span><span class="light_text">HOMES</span></h2>
  <div class="house">
    <svg width="33" height="24" viewBox="0 0 33 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <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>
      <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>
    </svg>
    <svg width="29" height="30" viewBox="0 0 29 30" fill="none" xmlns="http://www.w3.org/2000/svg">
      <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>
      <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>
    </svg>
  </div>
</div>

Html相关问答推荐

将网格包装在css中

如何在元素的三条边中间换行边框？

调整一组IMG的大小以适应容器DIV

在网页上的 Select 器中显示选项时出现问题：未在GO模板中传递循环{{range}}的数据

单独处理Button：Focus的多行按钮

更改Angular 为17的material Select 字段的高度？

目标第一个祖先标签的 XPath

带有图像的虚线边框

为什么我的 html 对话框在 React 中没有渲染在我的内容之上？

停止 Bootstrap 5 输入调整 CSS 网格单元的高度

复制两个

会产生一个空行；复制

元素不会

如何在 VS Code 中 Select 和删除 HTML 元素(其标签和内容)？

如何在CSS伪类函数中使用复合 Select 器：host-context()

排列卡片时遇到困难

css 网格创建空行和列

如何在Bootstrap卡片底部添加波浪形状

如何在 svelte 中对静态 html 文件使用href=

Tailwind CSS 复选框样式不起作用

在一行中对齐两个不同形式的按钮

所有幻灯片上的 Quarto RevealJS 标题

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630