Question

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

如果有足够的空间，文本应该在一行中垂直对齐到中间。
如果没有，则文本应重排为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中的文本居中... ...

小提琴：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;
}

我猜这有助于你

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

3 个答案: