Question

我试图让彼此相邻的两件物品。它们需要垂直居中，如果文本太长，第二项需要包装文本。

这是我尝试过的一个JS小提琴：https://jsfiddle.net/zhu0gq2x/

＆＃13;

#column-content {
  display: inline-block;
  border: 1px solid red;
}

img {
  vertical-align: middle;
}

span {
  display: inline-block;
  vertical-align: middle;
}

＆＃13;

<div id="column-content">
  <img src="http://i.imgur.com/WxW4B.png">
  <span><strong>1234</strong> yet another text content that should be centered vertically</span>
</div>

＆＃13;

如果屏幕太小，然后开始包装，上面的示例会将文本删除到新行。我如何确保它保持在同一条线上？ HTML并不是一成不变的，我可以将其改为但我需要它。

Answer 1

尝试使用flexbox

#column-content {
  display: flex; /*or inline-flex*/
  align-items: center;
}

＆＃13;

#column-content {
  display: flex;
  align-items: center;
  border: 1px solid;
}

＆＃13;

<div id="column-content">
  <img src="https://i.stack.imgur.com/cucka.png">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
</div>

＆＃13;

Answer 2

CSS Grid可以做到这一点：

＆＃13;

#column-content {
  display: grid;
  grid-template-columns: auto 1fr;
}

#column-content * {
  align-self: center;
  border: 1px solid red;
}

＆＃13;

<div id="column-content">
  <img src="http://www.placebacon.net/50/50">
  <span><strong>1234</strong>
        yet another text content that should be centered vertically</span>
</div>

＆＃13;

Answer 3

<div id="column-content" style="white-space:nowrap;">

如果你使用它。它不会创建一个新行

Answer 4

CodePen URL

＆＃13;

#column-content {
  display: flex;
  align-items: center;
  border: 1px solid red;
  width: 40em;
  justify-content: flex-start;
  height: 100px;
}

#column-content>* {
  margin-right: 20px;
  border: solid 1px green;
}

＆＃13;

<div id="column-content">
  <div>
    <img src="http://i.imgur.com/WxW4B.png">
  </div>
  <div>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
  </div>
</div>

＆＃13;

使用多行文本垂直对齐两个项目和一个项目

4 个答案: