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，它是一个新的。

在图标前放置一个包装器并设置display 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

中找到更多内容希望，它会帮助你。如果你还没有得到它，请多多问我。

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

1 个答案: