Question

我正在尝试将我的图片与网页中的标题和副标题对齐。我希望图像位于左侧，标题的副标题位于中间位置。

 <header>
    <div class="title_div">
        <img src="pictures/logo.png" alt="logo"/>
        <p>
           <h1>Title</h1>
           <h2>Subtitle</h2>
        </p>
     </div>
 </header>

我尝试使用float：left属性，但图像从标题中删除...我看到了，因为我使用了以下css属性：

header{
    background:#f1f1f1;
    border: black solid;
}

我希望达到像https://www.ted.com/这样的内容，但在＃34;＃ideas;＃34;

之后会有一个副标题。

Answer 1

为徽标和文字使用单独的div使其更清晰：

<header>
<div class="logo">
  <img src="pictures/logo.png" alt="logo"/>
</div>

<div class="title_div">
 <h1>Title</h1>
 <h2>Subtitle</h2>
</div>
</header>

<强> CSS：

header{
 float:left;
}

.logo{
 float:left;
 margin:20px;
}
.title_div{
 float:left;
}

注意：请注意您使用HTML时非常不当。 P标记用于段落，H1用于标题，因此您无法将标题放在P标记内。重新构建HTML。

Answer 2

此解决方案类似于@ user45250，但我使用垂直对齐技术来处理与图像相关的多行文本。

<header class="cf">
     <img src="http://placehold.it/150x100" alt="logo">
     <div class="title">
         <h2>Title</h2>
         <strong>Subtitle</strong>
     </div>
 </header>

/* Micro Clearfix - http://nicolasgallagher.com/micro-clearfix-hack/ */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
header {
    background: #f1f1f1;
    border: black solid;
}
.title {
    height: 100px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
img, .title {
    float: left;
}

我使用了micro clearfix因为<header>会崩溃，因为它的子元素已经浮动。

JSFiddle

Answer 3

您可以使用表格显示属性轻松完成此操作：

html清理并有效...

header {
  display:table;
  width:100%;
  text-align:center;/* or was it just vertical-align ? */
  border:1px solid
  }
header>div {
  display:table-cell;
  vertical-align:middle;/* or was it just text-align ? */
  }
.title_div {
  width:1%;
  }

<header>
  <div class="title_div">
    <img src="http://dummyimage.com/100x100/&text=logo" alt="logo" />
  </div>
  <div>
    <h1>Title</h1>
    <h2>Subtitle</h2>

  </div>
</header>

水平对齐图像和段落

3 个答案: