图像消除的垂直和水平对齐

Question

.floral-icon {
    vertical-align: middle;
    float: left;
    }

<div id="heading">

    <div id="colD"><p><img class="floral-icon" src="_images/pg_p_lewis_icon.png" alt="floral icon" width="32" height="32"></p></div>
    <div id="colE"><p>Lewis</p></div>
    <div id="colF"><p><img class="floral-icon" src="_images/pg_p_lewis_icon.png" alt="floral icon" width="32" height="32"></p></div>    
    </div>

我正在尝试在单个单词标题的两侧对齐图标。我希望它在中间垂直对齐，右侧与标题左侧对齐，左侧与标题右侧对齐，以便图标与任一侧的标题相邻。当我离开浮动属性以将其左对齐或右对齐时，图标垂直排列正确。当我添加浮动时，图标会跳到顶部并且在垂直位置没有正确对齐。我究竟做错了什么？谢谢。

Answer 1

忘记浮动和垂直对齐，这是一个古老的技巧。试试 flex，这是一个新的。

在您的图标之前放置一个包装器并设置显示弹性。

这是我的一些简单例子，你应该自己改进它

.wrap{
width:100%;
height:250px;
background:yellow;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-direction:row;
}

.icons{
width:50px;
height:50px;}

.icons img{
width:100%;}

<div class='wrap'>
  <div class='icons'><img src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/blue-metallic-orbs-icons-natural-wonders/050386-blue-metallic-orb-icon-natural-wonders-flower9.png"></div>
  <div class='icons'><img src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/blue-metallic-orbs-icons-natural-wonders/050386-blue-metallic-orb-icon-natural-wonders-flower9.png"></div>
</div>

您可以在此链接中找到更多信息css Tricks

希望，它会帮助你。如果您仍然不明白，请再问我。