水平对齐图像和段落

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 属性，但图像从 header 中消失...我看到了，因为我使用了以下 css 属性：

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

我想达到类似 https://www.ted.com/ 的目的，但副标题在 "Ideas worth spreading" 下。

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 标签内。 Re-structure 你的 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

您可以使用 table 显示属性轻松做到这一点：

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>

水平对齐图像和段落

horizontal align image and paragraph

html

css

alignment