top將文本與圖像對齊

Question

我嘗試在圖像的右側標題和作者姓名。標題必須與圖片的頂部對齊，如下圖所示。

我試着用填充和利潤率玩，但現在，這裏是我得到：

（JSFiddle here）

.post-head{ 
 
display: block; 
 
position:relative; 
 

 

 
} 
 

 
.post-head-info { 
 

 
    overflow:hidden; 
 
    padding-top:0px; 
 
    margin-top:0px; 
 

 
} 
 

 
.picture{ 
 
    float:left; 
 
    overflow:hidden; 
 
    position:relative; 
 
    padding-right: 10px; 
 
} 
 

 
h1 { 
 
    padding-top:0px; 
 
    padding-bottom:0px; 
 
    margin-top:0px; 
 
    font-size: 24px; 
 
} 
 

 
span{ 
 
    padding-top: 0px; 
 
    margin-top:0px; 
 
}

<div class="post-head" > 
 

 
    <div class="picture"> 
 
     <img src="https://upload.wikimedia.org/wikipedia/commons/3/31/Japan-bio-stub.png" /> 
 
    </div> 
 

 
    <div class="post-head-info" > 
 

 
    <h1>Title</h1> 
 
    <span>Posted on by author</span> 
 

 
    </div> 
 

 
    </div>

Answer 1

的間距由您h1的line-height引起的。如果你將它縮小到20px左右，這應該意味着你的文本從div的頂部開始。請注意，如果您的文字換行，它可能會導致您的文字重疊或接近在一起，因爲您的字體大小爲24像素。

另一種方法只是爲h1添加一些負邊距。這兩個例子都低於：

.post-head { 
 
    display: block; 
 
    position: relative; 
 
} 
 

 
.post-head-info { 
 
    overflow: hidden; 
 
    padding-top: 0px; 
 
    margin-top: 0px; 
 
} 
 

 
.picture { 
 
    float: left; 
 
    overflow: hidden; 
 
    position: relative; 
 
    padding-right: 10px; 
 
} 
 

 
h1 { 
 
    padding-top: 0px; 
 
    padding-bottom: 0px; 
 
    margin-top: 0px; 
 
    font-size: 24px; 
 
} 
 

 
span { 
 
    padding-top: 0px; 
 
    margin-top: 0px; 
 
} 
 

 
.line-height { 
 
    line-height:20px; 
 
} 
 

 
.minus-margin { 
 
    margin-top:-4px; 
 
}

<div class="post-head"> 
 
    <div class="picture"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/31/Japan-bio-stub.png" /> 
 
    </div> 
 
    <div class="post-head-info"> 
 
    <h1 class="line-height">Title that might wrap Title that might wrap Title that might wrapTitle that might wrap</h1> 
 
    <span>Posted on by author</span> 
 
    </div> 
 
</div><br> 
 

 
<div class="post-head"> 
 
    <div class="picture"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/31/Japan-bio-stub.png" /> 
 
    </div> 
 
    <div class="post-head-info"> 
 
    <h1 class="minus-margin">Title</h1> 
 
    <span>Posted on by author</span> 
 
    </div> 
 
</div>

Answer 2

這可能是更多的解決方案，但如果你正在尋找一個快速解決方案：

h1 { 
    margin-top:-5px; 
} 

基本上只使用負邊距。

https://jsfiddle.net/8xd9x4qh/4/

Answer 3

.post-head-info { 
    overflow:hidden; 
    padding-top:0px; 
    margin-top:0px; 
    line-height: .8; /* Add that */ 
} 

Answer 4

只需使用

line-height: 1; 

負利潤率從來沒有有用的使用。只有真正的必須擁有。 或給圖片一個小小的毛利

Answer 5

我降低了圖片使用百分比margin-top。這似乎是調整圖像頂部定位將是解決這個問題的方法。之後你可能想要更低的圖片和標題頁邊距以更接近跨度。

.post-head{ 
 
display: block; 
 
position:relative; 
 

 

 
} 
 

 
.post-head-info { 
 

 
    overflow:hidden; 
 
    padding-top:-3px; 
 
    margin-top:0px; 
 

 
} 
 

 
.picture{ 
 
    float:left; 
 
    overflow:hidden; 
 
    position:relative; 
 
    padding-right: 10px; 
 
    margin-top: 0.6%; 
 
} 
 

 
h1 { 
 
    padding-top:0px; 
 
    padding-bottom:0px; 
 
    margin-top:0px; 
 
    font-size: 24px; 
 
} 
 

 
span{ 
 
    padding-top: 0px; 
 
    margin-top:0px; 
 
}

<div class="post-head" > 
 

 
    <div class="picture"> 
 
     <img src="https://upload.wikimedia.org/wikipedia/commons/3/31/Japan-bio-stub.png" /> 
 
    </div> 
 

 
<div class="post-head-info" > 
 

 
    <h1>Title</h1> 
 

 

 
    <span>Posted on by author</span> 
 

 

 

 
</div>

Answer 6

難道這樣的事情，你是後？根據需要隨意使用邊距和大小。

img { 
 
    float: left; 
 
} 
 
div { 
 
    margin-left: 6px; 
 
    float: left; 
 
} 
 
h1 { 
 
    font-size: 20px; 
 
    line-height: 20px; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
}

<img src="https://upload.wikimedia.org/wikipedia/commons/3/31/Japan-bio-stub.png" /> 
 
<div> 
 
    <h1>Title</h1> 
 
    <span>Posted on by author</span> 
 
</div>

Answer 7

問題是H1的行高。

.picture img{ 
 
\t float:left; 
 
} 
 

 
.post-head-info{ 
 
\t line-height: 1.3em; 
 
} 
 

 
.post-head-info h1{ 
 
\t margin:0; 
 
}

<div class="post-head"> 
 
\t <div class="picture"> 
 
\t \t <img src="https://upload.wikimedia.org/wikipedia/commons/3/31/Japan-bio-stub.png" /> 
 
\t </div> 
 
\t <div class="post-head-info" > 
 
    \t \t <h1>Title</h1> 
 
    \t \t <span>Posted on by author</span> 
 
    \t </div> 
 
</div>