css - 下面的div如何？

Question

我目前有一张图片向左浮动，带有 <ul/>和一个 <div/>在图像的右侧。

Answer 1

您可以使用显示:表格；和垂直对齐:中间；像这样:

<footer id="footer">
   <div class="first-column">
       <img
       id="footer-logo"
       src="testImage.png"
       />
   </div>

   <div class="second-column">
      <ul style={{listStyleType: 'none'}}>
         <li style={{display: 'inline'}}>Text 1</li>
         <li style={{display: 'inline'}}>Text 2</li>
         <li style={{display: 'inline'}}>Text 3</li>
      </ul>
      <div style={{color: 'white'}}>Place me below ul</div>
   </div>
</footer>

还有你的CSS:

#footer{
   display:table;
   width: 100%;
   height: 50px;
   left: 0;
   bottom: 0;
   background-color: black;
   z-index: 100;
   box-sizing: border-box;
   padding: 10px;
}

.first-column{
   display: table-cell;
   vertical-align: middle;
   width: 50px;
}
.first-column img{
   width: 100px;
}
.second-column{
   display: table-cell;
   width: 100%;
   vertical-align: middle;
}
.second-column ul li{
   list-style: none;
   color: #ffffff;
}
.second-column div{
   color: #ffffff;
   padding-left: 40px;
}