使用HTML / CSS完成noob。
我正在尝试这样的事情:http://imgur.com/Bc72V4M
这是我的代码:
<div id="topbar">
<div class="image">
<img src="images/ghwlogo.png">
</div>
<div class="text">
<h1>TEXT TEXT TEXT TEXT TEXT</h1>
</div>
</div>
我试过浮动div顶部栏,然后显示内联但它从不水平显示。
我很困惑。以下教程很容易,但是当你需要自己弄清楚如何做到这一点时,它就完全不同了。
我想我在某个地方错过了一步。我觉得这应该很容易,但事实并非如此。
答案 0 :(得分:2)
img {
display: inline;
vertical-align: middle;
}
.subhead {
display: inline;
vertical-align: middle;
}
&#13;
<div>
<img src="http://dummyimage.com/100x100/000/fff"/>
<h1 class='subhead'>
TEXT
</h1>
</div>
&#13;
我删除了一些HTML;当我无法想到如何通过CSS获得效果时,我只会添加更多内容。你可以添加一些,但你可能需要在某些内部元素上设置display:inline。
通常,水平放置元素的几种不同方法:
浮动:从标准流程布局中删除它,并可能会干扰根元素的总高度。以前是首选的放置方法,但我觉得有更好的选择。
显示内联:将元素视为文字。无法拥有自定义高度或其他各种属性。
显示内联阻止:通常是&#34; fix-all&#34;对我来说,当我想要水平布置的东西,但要有其他造型方面,如高度,边框等。
位置绝对:您可以将更高的元素设为&#34;相对元素&#34;通过在其上设置position: relative
来进行绝对定位。像浮动一样,它将它从布局中取出,但它甚至可以重叠元素;对某些事情有用。不要太依赖绝对像素数量。
就我而言,一旦水平布置,垂直对齐就是下一个问题。请记住,添加内容可能会使此块非常高,因此您只能说&#34;垂直对齐到事物的底部&#34;。将div中的所有元素视为段落中的字母;对于较小的那些,你告诉它如何对齐那一个字母。对于最大的那些,你告诉它在哪里&#34;字母&#34;与其他人相比是一致的。因此,在图像上设置垂直对齐方式也很重要。
答案 1 :(得分:0)
编辑:根据@ Katana314答案更新答案。我保持了OP的标记。
#topbar {
width: 100%;
overflow: hidden;
}
.image {
display: inline-block;
vertical-align: middle;
border: 5px solid black;
height: 100px;
width: 100px;
}
.text {
display: inline-block;
vertical-align: middle;
}
答案 2 :(得分:0)
您可以将图片和文字设为单独的div
,然后将它们都放在inline-block
属性下。但是,文本div
需要具有position: absolute
属性,以用于格式化目的。
查看小提琴后,您可以相应地调整left
位置属性以生成空间。以下是链接:https://jsfiddle.net/kuLLd866/。
<强> HTML:强>
<body>
<div class="image">
<img src="http://gfx2.poged.com/poged/game_logo_default_fix.png?2492">
</div>
<div class="imagetext">
<h1>Text text text</h1>
</div>
</body>
<强> CSS:强>
.image {
display: inline-block;
}
.imagetext {
position: absolute;
top: 50px;
display: inline-block;
}