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

我想要得到的东西是这样的：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>

我已经试过浮动股利的顶栏，然后显示在线，但它从来没有水平显示。

我很困惑。接下来的教程很简单，但是当你需要弄清楚如何自己做这件事时，它就完全不同了。

我想我错过了某个步骤。我觉得这应该很简单，但事实并非如此。

来源

2015-07-21 Bug Senpai

怎样的CSS外观 – code

你缺少你的CSS –

我知道我失去了我的CSS，我删除了我的代码。无论如何，这是不正确的。 –

编辑：更新答案每@ 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/

来源

2015-07-21 02:10:24 gautsch

img { 
 
    display: inline; 
 
    vertical-align: middle; 
 
    } 
 

 
.subhead { 
 
    display: inline; 
 
    vertical-align: middle; 
 
    }

<div> 
 
    <img src="http://dummyimage.com/100x100/000/fff"/> 
 
    <h1 class='subhead'> 
 
    TEXT 
 
    </h1> 
 
</div>

我删除了一些HTML;我只想添加更多，当我无法想到如何仅通过CSS获得效果。你可以添加一些回来，但你可能必须设置显示：然后内联一些内部元素。

通常，推杆元件水平的几种不同的方式：

漂浮：删除它从标准流布局，并且可以与根元素的总高度干扰。以前是安置的首选方法，但我觉得有更好的选择。

Display Inline：将元素看作文本。不能有自定义高度或其他各种属性。

显示inline-block的：通常，一个“修复所有”对我来说，当我想要的东西，水平放置，而是有其他的造型方面，例如高度，边防等

位置绝对：您可以通过在其上设置position: relative将较高元素设置为绝对定位的“相对元素”。就像浮动一样，它会将其从布局中移除，但它甚至可以重叠元素;对某些事情有用。不要过分依赖绝对像素数量。

就我而言，一旦水平放置，垂直对齐就是下一个问题。请记住，添加内容可能会使此块非常高，因此您不能只说“垂直对齐到底”。将div中的所有元素想象为段落中的字母;对于较小的那些，你要告诉它如何对齐这一个字母。对于最大的那个，你告诉它“字母”与其他比较的位置。因此，在图像上设置垂直对齐方式也很重要。

来源

2015-07-21 02:12:27 Katana314

您可以使图像和文本分开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; 
}

来源

2015-07-21 02:24:40 Shrey

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

回答

相关问题