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

Question

在我的页眉中，我希望我的徽标位于左侧，文字位于右侧：

如果足够 space，文本应排成一行并垂直居中。
如果没有，文本应重排为 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

Answer 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;
}

Answer 2

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

只需使用 inline-block 将 div 排列起来，然后使用 before 元素将文本居中放置在右侧 div 与...

Fiddle: 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;
}

Answer 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;
}

我想这对你有帮助

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

How to put logo in left, and text vertically-aligned next to it?

css

vertical-alignment