Question

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

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

这是我到目前为止所做的：

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

添加＆＃34; float：left;＆＃34;禁用＆＃34; vertical-align：middle;＆＃34;。但是，如果我删除浮动属性，我不知道如何将徽标固定在左侧。

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

谢谢！

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/

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

2 个答案: