Question

使用HTML / CSS完成noob。

这是我的代码：

<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顶部栏，然后显示内联但它从不水平显示。

我很困惑。以下教程很容易，但是当你需要自己弄清楚如何做到这一点时，它就完全不同了。

我想我在某个地方错过了一步。我觉得这应该很容易，但事实并非如此。

Answer 1

＆＃13;

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;与其他人相比是一致的。因此，在图像上设置垂直对齐方式也很重要。

Answer 2

编辑：根据@ 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;
}

小提琴：https://jsfiddle.net/dgautsch/che0dtfk/

Answer 3

您可以将图片和文字设为单独的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;
}

在站点图标旁边显示居中文本

3 个答案: