图像和文本垂直对齐，同时将文本和浮动图像居中放置在左侧

Question

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

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

这是我目前拥有的：

    <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;"。但是，如果我删除浮动属性，我不确定如何将徽标固定到左侧。

关于如何实现这一目标的任何想法。只是寻找一个简单的答案，不要太复杂。

谢谢！

Answer 1

为设置宽度和高度，不要使用浮点数示例：

<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

似乎适用于浮动的解决方案（至少在 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%;
}

fiddle: http://jsfiddle.net/u7cjLL1f/

如果您希望文本占据整个父级 div 并遍历图像：http://jsfiddle.net/u7cjLL1f/1/

图像和文本垂直对齐，同时将文本和浮动图像居中放置在左侧

Vertical alignment of image and text, while centering text and floating image to the left

html

image

footer

vertical-alignment

text-align