css - 左侧文本、图像居中、右侧文本以及内联的所有内容

Question

我有一个带有页眉、正文和页脚的容器 div。

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

我尝试了 float left right & margin auto，但它不起作用Pull left center-block pull right (with bootstrap) 确实有效，但 pull right block 与其余部分不一致。

它应该是这样的:

有什么想法吗？

Answer 1

给你。

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

<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>

如果你想让文字在左右两侧，图片居中，你可以这样做:

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

<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>