使容器div居中对齐，并将文本对齐div的底部

Question

我要实现的目标：将容器div（包含两个div）居中，在第二个div中，底部对齐文本

• 在我的第一分部，这是一张图片

• 在我的第二个div中，两段文字

    ———————----- | | | | column2 | column1 | -———————------- | picture | | Paragraph | | | ———————-------- | | ———————————------------------ | | | a paragraph of text | | | | of text of text of text of | ——————----—— ———————---------------------- 

我的问题：

• 我无法将我的两个段落放在底部。 他们在顶部。

• 我的容器div也未与中心对齐

目前，它们看起来像这样：

    ———————-----    -———————-------
   |    picture  |  | Paragraph   |
   |             |  ———————--------
   |             |   ———————————------------------
   |             |  | a paragraph of text        |
   |             |  | of text of text of text of |
   |             |   ———————----------------------
   |             |
   |             |
   |             |
    ------------

我当前的代码：

<body>
  <div class="container">
    <div class="img column1">
      <img id="img" src="https://animage.jpg">
    </div>
    <div class="comment column2">
      <p>a paragraph</p>
      <p>another paragraph</p>
    </div>
  </div>
</body>



.column1, .column2{
  width:300px;
  float: left;
  margin: 10px;
}
#img{
  max-width: 300px;
  max-height: 600px;
}
.container {
  width: 80%;
  padding-top: 100px;
  margin: 0 auto;

}

Answer 1

将您的align方法更改为Flex，可以轻松实现，请看下面

刚刚删除了float: left在列元素上并添加了display: flex和align-items: flex-end在容器处align-items: flex-end 。

 .column1, .column2{ width:300px; margin: 10px; } #img{ max-width: 300px; max-height: 600px; } .container { width: 80%; padding-top: 100px; margin: 0 auto; display: flex; align-items: flex-end; } 

 <body> <div class="container"> <div class="img column1"> <img id="img" src="https://placeimg.com/200/200/any"> </div> <div class="comment column2"> <p>a paragraph</p> <p>another paragraph</p> </div> </div> </body> 

Answer 2

 .container{display:flex;} .column1, .column2{ width:200px; margin: 10px; border:solid 1px #ccc; flex-direction:column; } .column2{ justify-content:flex-end; display:flex; } #img{ max-width: 100%; } p{ margin:0;} .container { width: 80%; padding-top: 100px; margin: 0 auto; } 

  <div class="container"> <div class="img column1"> <img id="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQMAAADCCAMAAAB6zFdcAAAAdVBMVEXMzMwAAADPz8/S0tLU1NS4uLjDw8OMjIyrq6vHx8ezs7OmpqbBwcHX19dRUVGampp2dnavr69jY2OdnZ1eXl4aGhp+fn5sbGynp6dKSkp4eHg6Ojp/f39ERERmZmYhISEoKCgNDQ2Tk5NXV1cuLi43NzctLS2IdN5EAAAE4ElEQVR4nO3Ye3uqOBAHYCYJIILcrTfwAtrv/xF3wi1E291297T6PPt7/+jxoEYymSRDHAcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgf0RIJsTdxYcPfLvZv23i37X5Q4QTpmWZJpF1h14TTK9VtucPbJ3v3bFwm+kLyks2ZZ4WjpyuuFVepkXwElGQxYUOZXsjWs7uR9TkDv8VUU3rtrzRefmdGxYBkRpfp0R1nh+Imv6ScEqiuDzQpZCfN/FbVEUbT0mlROjNrvJNDzEQ3nq9WPEn3AN9JwiynmIgd9QIJaUK9uT3fa4pUdymV9LzgyBC8oc7nWdBRtUYA1lSJPv338/qoYHPKJ/ehhiIgorhixzbSLdZ0aK7IkRL3mdN/BZxblePFz1K3SEGwh2HzhFLSr6aCBzFohliII/raawDKnQTtJmiSfsnJwKngfvYLRWf1HJ4Q77RtDjKw26WCPNl/35TcZx1vvLHGJQmf1Y8K3RiTLNK5fT15PoRMq+l7oHVB+mTK8cYqGs8jdM8Ho7ThuaNZmMPpirXuplhLvjT1zg9uPcyN4nB8fhgFH6Tuux5qXKLpHDUeCdd9ospD2a5ylljVkVxpMXwjkootWIgE/6gGGPg8NQaoiEOtdDLZTyNPf/alyfYz4goFBXR6Uy0m+oDvUSMMbBukS8uzP2uNkMQuMeVlc8i0gutiYEsqAyU4GCf17ogCNazNcAj/6kx4NTMDpR4vJkX62GM1UZn7hQDq9uRNWayDwJnwZs9peWhm2G+qQ+WByoTf0dpVxMF825bAXkCsaVz3a8FQlxJ/ytDysQsBtk8BgE18zHjTNjKhyxw1L6b//MYKA4Cy93ux+yhP2+eG4OQaKxWOesrqau7vb7zL8Wgy4SC3uw+8FfC7qtTDIRbU5oFUdFSrX/u1WKQTmOodjflqLruC6IvzAW24nryLgs4UH2bUwy4jdzRj0dCue8X7/XmQjHdjUwvAVd3/dL48ZpoJYXGawFt7Ris2vd+dvHeOJRf13aaFAGV0u529Pw1MTQxqMjLqAk8LVhQxq/03ph+vpfzWuCnFM7HkUd/OTThk8N/9Y+Yb0ldQMt6N98bi6fGQM9MU+ikF/18Z4kcdZvVSNW8RuqyoFK8j8yDoA52C1fJUTGd7ArTuxopem4M1Nn0UMU35S5GDSX8965WvsXzvJf9pmgHQSzHFrKU+HVXK5nviITjatfKl2fXytU0ClzY8AIvBrpW7o6W5s9MW2tJVI3eSJyHIIx4bVnpIpyXlq05TDnqhTKg47hleE9/ZuLJEPdFslDtPNGnWpmL+/HZWZxOs9sVzVQa6SA85rPZFw6ncQOWWbe8cOizfu+QL/DszGXszl0ptXJjqx8mBryKX0LFn1jenaFcTV2gNrfHhDYxcOkcyu4Mxae6v1RTI7nRqH2BMxSuC9d0jeMznTLrPNHEQAQ7WsfxO53uHvDEhy/NNVMjeTE/j5Tllcwmc6TLrr0Rh/dP9eQ/EGKR5se3xd0Zb1CYmSGXVV7u7z/xj1yz6Sk32eT5vghmZ6r+sUzDb57T/piPT7n/wDm4dcjycLYuXuhsHQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4Nf8BZyMMUIZKGmqAAAAAElFTkSuQmCC"> </div> <div class="comment column2"> <p>a paragraph</p> <p>another paragraph</p> <p>another paragraph</p> <p>another paragraph</p> </div> </div> 

Answer 3

为此，最简单且可能最好的解决方案是使用“灵活的盒子布局”。 在下面的代码段中，我列出了您可以使用的示例。 我建议您阅读更多关于flexbox ，因为它绝对可以为您解决以后的布局问题再次提供帮助：

css-tricks.com上的Flexbox完整指南

MDN上的CSS灵活框布局

 *{ box-sizing: border-box; margin: 0; padding: 0; } .container{ display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-end; /* just for presentation */ padding: 1em; border: 1px solid black; } .column--picture{ flex: 0 0 auto; /* up to you */ width: 200px; height: 400px; } .column--picture img{ /* make sure to limit the size of the image, or make `.column--picture` to not show overflow content */ display: block; width: 100%; height: 100%; object-fit: cover; } .column--wrapper{ flex: 0 1 auto; /* just for presentation */ max-width: 400px; } .row{ /* just for presentation */ margin-left: 1em; padding: 1em; border: 1px solid black; } 

 <div class="container"> <div class="column column--picture"> <img src="https://images.unsplash.com/photo-1458966480358-a0ac42de0a7a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjI2ODUxfQ&s=b92b03976bc401ad70337cfd39e9ed95" alt="green leaf tree on shore"> </div> <div class="column column--wrapper"> <div class="row"> <h2>Stop floating and start flexing.</h2> </div> <div class="row"> <p>Turkey beef biltong, sausage ball tip pork loin pork chop corned beef boudin ground round salami pancetta flank filet mignon sirloin.</p> </div> </div> </div> 

Answer 4

您可以使用flexbox实现此目的。 如果您尝试与旧版浏览器（例如IE 10）兼容，则此方法可能无效。 Flexbox是对齐项目的更好方法。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 .container { display: flex; justify-content: center; } .container img { height: 180px; } .container .column2 { display: flex; flex-direction: column; justify-content: flex-end; } 

 <body> <div class="container"> <div class="img column1"> <img id="img"src="https://upload.wikimedia.org/wikipedia/en/5/58/Penny_test.jpg"> </div> <div class="comment column2"> <p>a paragraph</p> <p>another paragraph</p> </div> </div> </body> 

Answer 5

将此代码添加到CSS中。

.column1, .column2 {
  width:300px;
  margin: 10px;
  display: inline-block;
  vertical-align: bottom;
}
p {    
  margin-top: 0;
  margin-bottom: 0;    
}

请查看此链接以获取您的解决方案。

Answer 6

您还可以使用rowspan和colspan功能，只需使用属性valign = bottom对齐它

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
       <td rowspan="2" valign="bottom">$50
</td>
  </tr>
  <tr>
      <td>February</td>
      <td>$80</td>
  </tr>
</table>

</body>
</html>