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

所以我遇到了一个小问题，我的代码在这里：我试图保持这两个对象在同一行而不会导致任何空间错误第一图片：保留两个项目在同一个div没有任何空间或格式问题

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）

来源

2014-03-19 user1643904

对不起，但我没有得到它。那么问题是什么？图像和文字之间没有空格。 –

你的代码对我来说很好看：http://jsfiddle.net/danield770/vNzMB/ – Danield

@Danield我相信他们想让它集中。就像第一个答案一样。 – Ruddy

您可以使用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>

来源

2014-03-19 08:08:35 JunM

感谢你的工作，有点我坚持使用webkit转换到位，但大部分工作*欢呼* – user1643904

您需要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; 
}

来源

2014-03-19 08:18:36 demonofthemist

我会看到如何工作，但它不适合我，但谢谢你回答任何一种方式，有点我第一次没有得到downvoted不知道答案：P – user1643904

也谢谢保证金的权利，我知道如何编码和做什么，但我没有我的一切，它将至少使它更容易编码下一个比特：B – user1643904

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

回答

相关问题