如何垂直對齊我的文本行？

Question

我的文本行垂直對齊有問題。 我有兩個文本行， <p> ，我想把第二個放在我的<div>的底部，所以我嘗試在我的<p>做vertical-align: bottom和text-bottom以及top和bottom的<p>那沒有用。

 .header { grid-area: header; background-color: red; display: grid; grid-template-areas: 'headerLeft rest headerRight'; grid-template-columns: 10% 1fr 30%; padding: 5px; } .header p { margin: 0px; } .headerRight { grid-area: headerRight; } .headerRight p { float: right; }

 <div class="layout"> <div class="header"> <div class="headerRight"> <p style="margin: 0px 0px 0px 1px;"><img src="https://i.imgur.com/V2aWxOK.png" style="height: 13vh" /></p> <p><img src="https://i.imgur.com/V2aWxOK.png" style="height: 13vh" /></p> <p style="margin: 0px 5px 0px 0px">Ola</p> <br /> <p style="margin: 0px 5px 0px 0px">Ola</p> </div> </div> </div>

Answer 1

我建議以下內容，其中涉及對 HTML 的一些小更新； 解釋在代碼本身的注釋中：

 .header { grid-area: header; background-color: red; display: grid; grid-template-areas: 'headerLeft rest headerRight'; grid-template-columns: 10% 1fr 30%; padding: 5px; } .header p { margin: 0px; } .headerRight { grid-area: headerRight; /* here we specify the use of CSS Grid layout: */ display: grid; /* define the top-and-bottom (0) and left-and-right (5px) grid gap gutters: */ grid-gap: 0 5px; /* define the named areas of the grid: */ grid-template-areas: ". paragraphAreaOne imageOne imageTwo" ". . imageOne imageTwo" ". paragraphAreaTwo imageOne imageTwo"; /* define the sizing of the columns; here we have the first column taking up one fractional unit (1fr), with the other columns sized, using the repeat() function, at min-content in order to have those grid-columns sized to the minimum necessary to contain their content: */ grid-template-columns: 1fr repeat(3, min-content); /* here we have three rows each sized, using the repeat() function, to size each row to min-content: */ grid-template-rows: repeat(3, min-content); } /* positioning the various elements into the appropriate grid areas: */ .headerRight p:first-of-type { grid-area: paragraphAreaOne; } .headerRight p:nth-of-type(2) { grid-area: paragraphAreaTwo; } .headerRight img:first-of-type { grid-area: imageOne; } .headerRight img:nth-of-type(2) { grid-area: imageTwo; }

 <div class="layout"> <div class="header"> <div class="headerRight"> <!-- your img elements were wrapped in <p> elements, which were removed, partially for semantic reasons, and partially because they were simply unnecessary --> <img src="https://i.imgur.com/V2aWxOK.png" style="height: 13vh" /> <img src="https://i.imgur.com/V2aWxOK.png" style="height: 13vh" /> <p>Ola</p> <!-- there was a <br> element here which, when using a Grid layout serves no purpose, so was removed --> <p>Ola</p> </div> </div> </div>

JS小提琴演示。

參考：

• gap / grid-gap
• grid-template-areas 。
• grid-template-columns 。
• grid-template-rows 。
• min-content 。
• repeat() 。

Answer 2

您正在使用網格，因此您可以使用 align-items:end 到標題，它會將您的元素與底部對齊，請在此處查看https://developer.mozilla.org/en-US/docs/Web/CSS /對齊項目