文字左，图像中心，文字右和＆amp;一切都是内联的

Question

我有一个带有标题，正文和页脚的Container div。

现在我想将文本对齐到左侧，将图像和文本居中放在右侧。一切都应该是内联的。

我试过左右浮动＆amp;保证金自动，但它不起作用 向左拉中心块向右拉（带自举）确实有效，但向右拉块并不与其余部分一致。

这应该是这样的：

任何想法？

Answer 1

你去。

＆＃13;

＆＃13;

.first {
    display: inline;
    float: left;
}
.second {
    display: inline;
    float: left;
}
.third {
    display: inline;
    float: left;
}

＆＃13;

<div>
    <p class="first">1</p>
    <img src="http://www.copsandrobbers.net/files/2012/09/lion.jpg" alt="lion image" class="second" />
    <p class="third">3</p>
</div>

＆＃13;

＆＃13;

＆＃13;

如果您希望文本位于左侧和右侧，图像位于中心，请转到：

＆＃13;

＆＃13;

div {
    text-align: center;
}
.first {
    display: inline;
    float: left;
}
.second {
    display: inline;
    float: none;
}
.third {
    display: inline;
    float: right;
}

＆＃13;

<div>
    <p class="first">1</p>
    <img src="http://www.copsandrobbers.net/files/2012/09/lion.jpg" alt="lion image" class="second" />
    <p class="third">3</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

Flexbox可以做到这一点

＆＃13;

＆＃13;

.wrap {
  margin-top: 100px;
  background: yellow;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

＆＃13;

<div class="wrap">
  <div class="left">Left</div>
  <img src="http://lorempixel.com/output/food-q-c-100-100-8.jpg" alt="" />
  <div class="right">right</div>
</div>

＆＃13;

＆＃13;

＆＃13;