徽标和h1标题使用html和css

时间:2016-06-02 12:24:23

标签: html css heading

我想创建一个网页,但在标题附近出现徽标时遇到了问题。我尝试了以下代码,但这不会产生预期的结果。

我有以下代码:

.line .box .header img {
  float: left;
}

.line .box.header h1 {
  position: relative;
  top: 1px;
  left: 10px;
}
<div class="line">
   <div class="box">
      <div class="s-6 l-2"> 
         <div class="header">
             <img src="img/hrcimg.jpg" alt="logo">
             <h1>United Nations Human Rights Council</h1>
        </div>
      </div>
   </div>
</div>

网站屏幕 output seen

3 个答案:

答案 0 :(得分:1)

您需要增加.l-2元素的宽度。

将此元素的宽度设置为100%将导致问题标题的布局消失。

当达到较低分辨率时,您需要相应地调整这些样式,以便将结构保持在一定程度 一旦分辨率达到移动比例,请考虑将它们显示在各自的行中。这可以通过将徽标设置为blockwidth: 100%;&amp;来完成。 height: auto;,此时您还需要终止float规则。

答案 1 :(得分:0)

所以我做了一些事情,如果我错了徽标需要,请纠正我:)

.line img {
  float: left;
}

.line h1 {
  position:relative;
  float:left;
  top: 1px;
  left: 10px;
}

https://jsfiddle.net/3an65dfp/3/

答案 2 :(得分:0)

试试这个:

&#13;
&#13;
img, h1 {
  display: inline-block;
  vertical-align: middle;
}
&#13;
<header>
  <img src="http://placehold.it/100x100">
  <h1>COMPANY NAME</h1>
</header>
&#13;
&#13;
&#13;