Question

我有一个网站徽标（figure），我需要将该徽标与h1标题放在同一行。有没有人有建议？这是我最近尝试过的事情：

figure {
  float: left;
  padding-left: 2px;
}

h1 {
  text-align: center;
  border: 3px solid: #FFA500;
  border-radius: 15px;
  box-shadow: 5px 5px 5px #828282;
}
header {
  text-align: center;
  letter-spacing: 1px;
  height: 8em;
  padding: 2em 10%;
}




            <title>Kumquats</title>
       <link rel="stylesheet" href="css/styles.css">
  </head>

  <body>
  <div id="wrapper">
     <header>
       <figure>
         <a href="index.html">
               <img src="img/kumquatlogo.gif"                 alt="kumquat                   logo"                                  width="75"               height="75">
       </figure>
         </a>
        <h1>Kumquat Central</h1>

我希望徽标图片位于网页的顶部，位于文本的h1元素旁边。 figure和h1包含在标题内，这就是我在那里有标题代码的原因。

Answer 1

由于你没有分享你的html，这是一个很好的方法https://jsfiddle.net/u97rggyy/5/

实际上这个问题应该标记为Vertically align text next to an image?

的副本

HTML

<!-- Case 1) text height is bigger than image height -->
<div>

  <img class="img-valign" src="http://www.placehold.it/30x30" alt="" />
  <span class="text1">some text1</span>
  <img class="img-valign" src="http://www.placehold.it/20x20" alt="" />
  <span class="text1">some text1</span>

</div>

<br/><br/><br/>

<!-- Case 2) image height is bigger than text height -->
<div>

  <img class="img-valign" src="http://www.placehold.it/50x50" alt="" />
  <span class="text2">some text2</span>
  <img class="img-valign" src="http://www.placehold.it/70x70" alt="" />
  <span class="text2">some text2</span>

</div>

CSS

.img-valign {
  vertical-align: middle;
  margin-bottom: 0.75em;
}

.text1 {
  font-size: 44px;
}

.text2 {
  font-size: 24px;
}

Answer 2

您还可以尝试以下方法：

HTML：

<header>
    <a href="index.html">
        <img src="http://placeholder.cn/128/aaa" alt="kumquat logo" class="figure">
    </a>
    <h1>Kumquat Central</h1>
</header>

然后你的CSS样式表。还修复了有错误的h1边框参数。

h1 {
    display: inline;
    text-align: center;
    border: 3px solid #FFA500;
    border-radius: 15px;
    box-shadow: 5px 5px 5px #828282;
}

header {
    text-align: center;
    letter-spacing: 1px;
    height: 8em;
    padding: 2em 10%;
}

.figure {
    vertical-align:middle;
}

如何在同一行上获取图像和H1

2 个答案: