Question

标题与照片顶部不完全对齐

HTML code：

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="basic.css">
   </head>
   <body>
      <div class="main">
         <div class="content">
            <section>
               <article>
                  <img class="img" src="http://gallery.photo.net/photo/7501614-md.jpg">
                  <div class="p">
                     <h1>Lorem Ipsum</h1>
                     dfdsf dasf ad sfdf ddas dfdf adsds fdffda
                     dfdsf dasf ad sfdf ddas dfdf adsds fdffda
                     dfdsf dasf ad sfdf ddas dfdf adsds fdffda
                     dfdsf dasf ad sfdf ddas dfdf adsds fdffda
                     dfdsf dasf ad sfdf ddas dfdf adsds fdffda
                     dfdsf dasf ad sfdf ddas dfdf adsds fdffda
                     dfdsf dasf ad sfdf ddas dfdf adsds fdffda
                     dfdsf dasf ad sfdf ddas dfdf adsds fdffda
                     dfdsf dasf ad sfdf ddas dfdf adsds fdffda
                     dfdsf dasf ad sfdf ddas dfdf adsds fdffda
                     dfdsf dasf ad sfdf ddas dfdf adsds fdffda
                     dfdsf dasf ad sfdf ddas dfdf adsds fdf
                  </div>
               </article>
            </section>
            2
         </div>
      </div>
   </body>
</html>

CSS代码：

.main{
      width: 960px;
      margin: 0px auto;
}

.content{
         float: left;
}


.img{
     float: left;
}

Demo code

Answer 1

只需将margin-top：2px添加到.img或将h1 {line-height: 1;vertical-align:baseline;}添加到您的CSS。线高的常见问题是对齐图像旁边的文本。例如，看看例如在这里：Line-height alignment problems

Answer 2

您可以使用图标题标记

或

您可以使用以下代码设置图像上的标题

Tex-align:center;

Answer 3

设置 h1 {line-height: 1;} - TRY DEMO

<强> HTML

<div class="main">
    <div class="content">
        <section>
            <article>
                <img class="img" src="http://gallery.photo.net/photo/7501614-md.jpg">
                <div class="p"><h1>Lorem ipsum</h1>
                    dfdsf dasf ad sfdf ddas dfdf adsds fdffda
                    dfdsf dasf ad sfdf ddas dfdf adsds fdffda
                    .........................................
                </div>
            </article>
        </section>
    </div>
</div>

<强> CSS

h1 {line-height: 1;} /* or 0.9 */

.main {
    width: 960px;
    margin: 0px auto;
}
.content {
    float: left;
}
.img {
    float: left;
}

如何对齐照片旁边的文字？

3 个答案: