垂直对齐不起作用需要使用float属性

Question

I'm trying to align the two images vertically within the head div and keep each one in different side. This is what I've tried:

 body, html { height: 100%; color: #666; background: #f2f2f2; font-family: sans-serif; margin: 0px auto; padding: 0px; } .main { max-width: 1280px; margin: 0 auto; } .head { width: 100%; height: 100px; } .left { float: left; width: 30%; } .right { float: right; width: 30%; text-align: right; } 

 <div class="main"> <div class="head"> <div class="left"><img src="http://via.placeholder.com/200x55.png/c45" alt="Logo 1" title="" width="200px" /></div> <div class="right"><img src="http://via.placeholder.com/200x55.png/s45" alt="Logo 2" title="" width="200px" /></div> </div> <div class="web-banner"> <div class="img"> <img src="http://via.placeholder.com/1280x550.png" width="1280px" height="550px" alt="main image" /> </div> <div class="title">the quick brown fox jumped over the lazy dog</div> <div class="sub-title">the quick brown fox jumped over the lazy dog</div> </div> </div> 

Answer 1

this is what i found and it worked using 'display: flex' and 'align-self:center'

 /* this div can be ignored, used for advisability only */ div { border: 1px dotted red; } .head { width: 100%; height: 100px; display: flex; } .left { max-height: 60px; float: left; width: 30%; align-self: center; margin-left: 60px; } .right { max-height: 60px; margin-left: auto; margin-right: 60px; float: right !important; width: 30%; text-align: right; align-self: center; } 

 <div class="head"> <div class="left"><img src="http://via.placeholder.com/200x60.png/c45" alt="Zebra Logo" title="logo 1" width="200px" /></div> <div class="right"><img src="http://via.placeholder.com/200x60.png/s45" alt="Zebra Logo" title="logo 2" width="200px" /></div> </div>