img之后的错误位置文字
[英]wrong position text after img
问题描述
there are some confusion in my project 
我的项目有些混乱
Why the text isn't at the middle of the header ,here is my html and css : 为什么文本不在标题的中间，这是我的html和css：
<body>
<header>
<img height="55px" width="55px;" src="../pic/small-book.png">
<span class="neworld">Neworld</span>
</header>
</body>
body{
width: 1200px;
height: auto;
min-height: 600px;
margin: 0 auto;
}
header{
width: 1200px;
height: 55px;
background-color: white;
line-height: 55px;
}
header .neworld{
}
I want to know why the neworld is not at the middle and why it isn't unavailable margin-top: -10px; 我想知道为什么neworld不在中间，为什么它也不是可用的margin-top：-10px; at header .neworld 在标题.neworld上
3 个解决方案
解决方案1
1 2017-04-12 15:56:23
解决方案2
0 2017-04-12 15:52:51
If you mean to vertically align the span text with the image, add this rule: 如果要使跨度文本与图像垂直对齐，请添加以下规则：
header img {
vertical-align: middle;
}
Concerning your second question, why you can't use margin-top: -10px on your .neworld element: Because margins only have an effect on block or inline-block elements. 关于第二个问题，为什么不能在.neworld元素上使用margin-top: -10px ：因为margin仅对block或inline-block元素有影响。 But a span is an inline element by default. 但是默认情况下， span是inline元素。
body { width: 1200px; height: auto; min-height: 600px; margin: 0 auto; } header { width: 1200px; height: 55px; background-color: white; line-height: 55px; } header img { vertical-align: middle; }
<body> <header> <img height="55px" width="55px;" src="../pic/small-book.png"> <span class="neworld">Neworld</span> </header> </body>
解决方案3
0 2017-04-12 15:53:09
Just apply vertical-align:middle to the image: 只需将vertical-align:middle应用于图像：
header img { vertical-align:middle; }
<body> <header> <img height="55" width="55" src="../pic/small-book.png"> <span class="neworld">Neworld</span> </header> </body>
Also (FYI), you don't include the px or the semi-colon when specifying pixel sizes directly in HTML and it is generally a bad idea to set the width and/or height of the body . 另外（FYI），当直接在HTML中指定像素大小时，不要包含px或分号，并且通常不建议设置body的width和/或height 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.