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

Question

我试图在 head div 中垂直对齐两个图像，并将每个图像保持在不同的一侧。这是我试过的:

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

这是我发现的，它使用“display: flex”和“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>