Question

所以我在编码方面遇到了一个小问题：我试图将这两个对象保持在同一行，而不会像第一张图片中那样造成任何空间错误：

CSS：

div.title-top {
    color: rgb(255, 255, 255);
    font-family: ostrich;
    font-size: 46px;
    background-color: rgb(230, 0, 0);
    border: 1px solid white;
    padding: 12px;
 }

HTML：

<body>
<div class="title-top"><img src="http://www.pixelblob.com/img-src/icon/1.png" height="70" width="70">PIXELBLOB STUDIOS</div>

图片＃1：

enter image description here

（显然我无法发布图片，但这里是链接）

我如何解决这个问题，以使它更像这样：

enter image description here

（请原谅我糟糕的绘画技巧，老鼠不能替换画笔）

（也很抱歉，如果此问题已在此处发布，但我不知道该搜索什么，横幅格式化帮助？修复额外的空间问题？他们似乎也似乎没有答案： c）中

Answer 1

您可以使用display: table-cell;和vertical-align: middle;

Fiddle

img, .title{
    display: table-cell;
    vertical-align: middle;
}

div.title-top {
    width: 100%;    
    color: rgb(255, 255, 255);
    font-family: ostrich;
    font-size: 46px;
    background-color: rgb(230, 0, 0);
    border: 1px solid white;
    padding: 12px;
    display: table;
}

HTML：

<div class="title-top">
   <img src="http://www.pixelblob.com/img-src/icon/1.png" height="70" width="70" />
   <div class="title">PIXELBLOB STUDIOS</div>
</div>

Answer 2

您需要float:left图片

/* Add line height eqaul to image height */
div.title-top {
    line-height:70px;
}

/* Add float to image */
div.title-top img{
    float:left;
    margin-right:10px;
}

将两个项目保留在同一个div中，没有任何空格或格式问题

2 个答案: