垂直对齐不起作用需要使用浮动属性答案

【问题标题】：vertical align not working need to use float property垂直对齐不起作用需要使用浮动属性
【发布时间】：2018-02-01 11:26:59
【问题描述】：

我试图在 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>

【问题讨论】：

floating 元素不能垂直对齐...您必须使用其他方法 - 例如尝试flexbox 解决方案...
寻求调试帮助的问题必须包含重现它所需的最短代码在问题本身中。 注意 - 请不要滥用代码块来解决这个问题要求.
@kukkuz 我不介意使用像 flexbox 这样的东西，只要它能让我的图像保持在正确的位置并在 div 中垂直对齐。
@Paulie_D 我想确保人们会看到 body 或 html 样式是否存在问题

标签： html css image header vertical-alignment

【解决方案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>

【讨论】：