图像和文本垂直对齐，同时将文本和浮动图像向左居中

Question

我查看了一些已发布的用于将图像和文本的垂直对齐居中的解决方案（例如：Vertically align text next to an image?）

但是，我也尝试将图像固定在左侧，并将文本水平居中。就像在页脚中一样，图像将“固定”在左侧，导航（或免责声明文本）将在该页脚中水平居中（并且它的位置会根据视口的大小进行调整）。

这是我目前所拥有的：

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

添加“浮动：左；”禁用“垂直对齐：中间；”。但是，如果我删除浮动属性，我不确定如何将徽标固定在左侧。

任何想法我可以如何实现这一目标。只是寻找一个简单的答案，没有什么太复杂的。

谢谢！

Answer 1

似乎适用于 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/

Answer 2

设置宽度和高度，不要使用浮动示例：

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