Question

无论出于何种原因，该图像使得标记的其余部分在其容器内不对齐，尽管它被设置为显示内联块。：

对你们来说，男人应该是简单的事情。对我来说，我已经花了好几天试图解决这个问题。

顺便说一下，我不想使用float。我不完全知道如何控制他们的怪异，也没有时间来学习它。如果你能不能使用它我会很感激。但是，如果你引导我找到一个涵盖他们所有事故的故事，我可以参加花车速成课程。

现在，我需要坚持使用非浮动css。

PS。边界仅用于“调试”，并且实际上不是必要的

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css_test2.css" />
</head>
<body>
<div id="header">
    <img src="http://img710.imageshack.us/img710/938/imgbz.png" id="logo">
    <a href="#" id="logo_txt">Title goes here</a>
    <span id="social_media">Social media links</span>
</div>
</body>
</html>

CSS：

#header {
    border: 1px solid red;

    width: 800px;
    height: 123px;
    margin: 0px auto;
    padding: 0px;

    background-color: rgb(181, 230, 29);
    }

#logo {
    border: 1px solid red;
    display: inline-block;

    width: 172px;
    height: 123px;
    }


#logo_txt {
    border: 1px solid black;
    display: inline-block;

    width: 100px;
    height: 123px;
    }
#social_media {
    border: 1px solid black;
    display: inline-block;

    width: 300px;
    height: 123px;
    text-align: right;
    }

Answer 1

解决此问题的最快方法是将vertical-align: top添加到#logo个样式。

Answer 2

添加

vertical-align:text-top;

到您的图片样式，vertical-align:top;也可以，但我使用文字顶部，因为它与文字对齐

默认的垂直对齐方式是基线，它会将图像的底部与其他div中的文本对齐。

FIDDLE

Answer 3

嗨，如果你以任何方式使用display inline-block而不是定义一个属性

vertical-align:top;

因为默认属性为vertical-align:middle;，因此定义verticle-align属性。

现在sam认为img 标记在 css verticel-align:top中定义 img标记属性

Answer 4

float左边的元素，一切正常：http://jsfiddle.net/ncQXD/1/

我添加了这个CSS：

#header > * {
    float: left;
}

#header {
    overflow: auto;
}

CSS：img的内联块对齐

4 个答案: