圖像和文本的垂直對齊，同時將文本和浮動圖像居中放置在左側

Question

我查看了一些已發布的解決方案，這些解決方案用於使圖像和文本的垂直對齊居中（例如： 在圖像旁邊垂直對齊文本？ ）

但是，我也試圖將圖像固定在左側，並將文本水平居中。就像在頁腳中一樣，圖像將“固定”在左側，導航（或免責聲明文本）將水平放置居中於該頁腳（位置會根據視口的大小進行調整）。

這是我到目前為止的內容：

    <div style="width:100%; text-align: center;">
        <img src="logo.png" alt="my logo" style="vertical-align:middle; float: left;" />
        <span>Copyright 2015 by Company, LLC. All Rights Reserved</span>
    </div>

添加“ float：left;” 禁用“ vertical-align：middle;”。 但是，如果刪除float屬性，則不確定如何將徽標固定在左側。

任何想法，我怎么能做到這一點。 只是尋找一個簡單的答案，沒有什么太復雜的。

謝謝！

Answer 1

為設置寬度和高度，不要使用float示例：

<div style="width:100%; text-align: center;">
    <img src="logo.png" alt="my logo" style="width:200px; height:200px;vertical-align:middle;display:inline-block" />
    <span>Copyright 2015 by Company, LLC. All Rights Reserved</span>
</div>

Answer 2

似乎與float兼容的解決方案（至少在chrome中）

<div class="container">
    <img src="http://lorempixel.com/400/200/"/>
    <div class="text">this is some text</div>
</div>

* {
box-sizing: border-box;
}
.container {
width: 100%;
text-align: center;
border: 1px solid red;
display: table;
}

img {
float: left;
}

.text {
border: 1px solid blue;
display: table-cell;
vertical-align: middle;
height: 100%;
}

小提琴： http ： //jsfiddle.net/u7cjLL1f/

如果您希望文本占據整個父div並遍歷圖像，請訪問： http : //jsfiddle.net/u7cjLL1f/1/