Question

我有一张图片，右边是一些文字。问题是图像比文本更高，这看起来很奇怪。如何在文本上方和下方显示相同数量的图像。

图片需要向上移动一点，否则文字需要向下移动。

enter image description here

HTML

<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" type="text/css">
<div class="header">
    <div class="logoandtext">
        <img src="http://i.imgur.com/fb7Zfbc.png" tite="Red Logo" alt="<Logo>">
         <h1 class="title">Red is a color.</h1>

    </div>
</div>

CSS

body {
    font-family: Source Sans Pro;
    font-weight: 400;
    color: #333333;
    width: 600px;
}
h1 {
    text-shadow: #6A6A6A 1px -2px;
    font-weight: 700;
    font-size: 50px
}
.logoandtext img {
    float: left;
}

JS Fiddle

Answer 1

一种解决方案是使文本容器的行高与图像的高度相同，例如：

h1 {
    font-weight: 700;
    font-size: 50px;
    line-height:100px;
}

http://jsfiddle.net/uvf4gqfp/4/

或移除浮动并将元素垂直对齐到中间

h1 {
    font-weight: 700;
    font-size: 50px;
    display:inline-block;
    vertical-align:middle;
}

img {
    vertical-align:middle;
}

http://jsfiddle.net/uvf4gqfp/20/

Answer 2

使用以下CSS将h1与img垂直对齐。 img显示设置为内联（而不是浮动）。 img和h1都垂直对齐。此外，h1的额外边距已被删除。

h1 {
    text-shadow: #6A6A6A 1px -2px;
    font-weight: 700;
    font-size: 50px;
    margin: 0;
    display: inline;
    vertical-align: middle;
}
.logoandtext img {
    vertical-align: middle;
}

更新了Fiddle

Answer 3

问题在于图像（因为你正在浮动它）。

该文本在技术上位于div。

的中间

你可以将inline-block;而不仅仅是float:left;的图像。

然后给他们vertical-align:middle;。

h1 {
    text-shadow: #6A6A6A 1px -2px;
    font-weight: 700;
    font-size: 50px;
    display:inline-block; /* added */
    vertical-align:middle;/* added */
}
.logoandtext img {
    display:inline-block; /* added */
    vertical-align:middle; /*added */
}

你可以通过：

整理一下

h1 {
    text-shadow: #6A6A6A 1px -2px;
    font-weight: 700;
    font-size: 50px;
}
.logoandtext img, h1 {
    display:inline-block;
    vertical-align:middle; 
}

JSFiddle

Answer 4

添加此代码即可：

img {
    vertical-align:middle;
    width: 49px;
}

http://jsfiddle.net/uvf4gqfp/22/

Answer 5

试试这个，

h1.title {
float: left;
margin: 15px 0 0;
}

.logoandtext {
overflow: hidden;
}

小提琴：http://jsfiddle.net/uvf4gqfp/23/

将文本放在与图像相同的高度上

5 个答案: