如何将徽标放在左侧，并在其旁边垂直对齐文本？答案

【问题标题】：How to put logo in left, and text vertically-aligned next to it?如何将徽标放在左侧，并在其旁边垂直对齐文本？
【发布时间】：2015-11-22 01:23:58
【问题描述】：

在我的标题中，我希望我的徽标位于左侧，文本位于其右侧：

如果有足够的空间，文本应该在一行中垂直居中对齐。
如果没有，文本应重排为 2 行，最好也对齐到中间。

我可以用下面的代码满足 (1)。但是一旦我减小了整个页面的宽度，h1 就会显示在img 的下方。如果我删除h1 {display:inline-block}，则h1 会正确显示在img 的左侧，但vertical-align 不会生效。

我怎样才能实现两者？

<img src="http://test.tipulnagish.co.il/wp-content/uploads/2015/11/tick-1015459_640.png">
<div>
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
</div>

img {
    height: 100px;
    width: 120px;
    margin: 15px 10px 15px 10px;
    float: left;
}
div {
    height: 130px;
    line-height: 130px;
}
h1 {
    display: inline-block;
    line-height:normal;
    vertical-align: middle;
}

Demo

【问题讨论】：

标签： css vertical-alignment

【解决方案1】：

你可以试试这个https://jsfiddle.net/4mzj50sx/6/

HTML

<div class="div">
    <img src="http://test.tipulnagish.co.il/wp-content/uploads/2015/11/tick-1015459_640.png">
    <div>
        <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
    </div>
</div>

CSS

.div {
    display: table;
}

div {
    display: table-cell;
    vertical-align: middle;
}

img {
    height: 100px;
    width: 120px;
    margin: 15px 10px 15px 10px;
    display: table-cell;
    vertical-align: middle;
}

【讨论】：

是的！我想只有display:table 在这里做正确的事

【解决方案2】：

你不需要表格来排列东西......

只需使用 inline-block 将 div 对齐，然后使用 before 元素将右侧 div 中的文本居中...

小提琴：https://jsfiddle.net/46xqLngb/

<div class="wrapper">
   <div class="left">
  <img src="http://test.tipulnagish.co.il/wp-content/uploads/2015/11/tick-1015459_640.png">
      </div>
  <div class="right">
      <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
  </div>
</div>


img {
    height: 100px;
}
div.wrapper {
    width: 100%;
    height: 130px;
}
div.left {
    width: 13%;
    display: inline-block;
    vertical-align: top;
    height:100%;
}
div.right {
    width: 83%;
    display: inline-block;
    vertical-align: top;
    height: 100%;
}
h1 {
    line-height: normal;
    vertical-align: middle;
    margin: 0;
    height: 100%;
    padding: 0;
}
h1:before {
    content: '';
    width: 0;
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}

【讨论】：

你能解释一下 h1:before 部分吗？
绝对！所以，如果你在那个正确的容器中垂直对齐某些东西，dom 不知道它在对齐什么（如果你问我，这很误导），所以......我们制作一个前元素来内联块对齐它（给它高度为 100%，宽度为 0)。这让 dom 知道它需要与中间对齐什么。所以，简而言之，你只需给元素一个 100% 的前元素，这样 DOM 就知道它需要什么来对齐到中间。
如果您将宽度更改为几个 px 并将颜色更改为非白色.. 那么您将看到它在起作用。这就是我工作中的每个人垂直对齐事物的方式。
我认为它会尝试将它与它的父级对齐。这是非常有用的完整信息，谢谢。
不能正常工作 - 当文本换行时，它会在徽标下方进行。

【解决方案3】：

HTML 部分

<div class="mainHeader">
    <img src="http://test.tipulnagish.co.il/wp-content/uploads/2015/11/tick-1015459_640.png" class="img"/>
    <p class="textStyle">WOW</p>
</div>

CSS 部分：

.mainHeader{
    border: 1px solid red;
    width: 100%
}

.img {
    width: 100px;
    height: 120px;
    display: inline-block;
    vertical-align: middle;
    margin: 15px 10px 15px 10px;
}

.textStyle {
    display: inline-block;
    vertical-align: center;
}

我想这对你有帮助

【讨论】：

不能正常工作 - 如果文本宽度不够，则整个文本都在徽标下方。