如何垂直对齐我的文本行？

Question

I'm having a problem with vertical alignment with my text lines. I have two text lines, <p> , and I want to put the second one in the bottom of my <div> so I tried to do vertical-align: bottom and text-bottom and the top and bottom ones in my <p> and that didn't work.

 .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

I'd suggest the following, which involves some minor updates to your HTML; explanations are in the comments to the code itself:

 .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 Fiddle demo .

References:

• 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 /对齐项目