top将文本与图像对齐

问题描述：

我尝试在图像的右侧标题和作者姓名。标题必须与图片的顶部对齐，如下图所示。top将文本与图像对齐

我试着用填充和利润率玩，但现在，这里是我得到：

.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>

答

的间距由您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>

答

这可能是更多的解决方案，但如果你正在寻找一个快速解决方案：

h1 { 
    margin-top:-5px; 
}

基本上只使用负边距。

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

我正要添加了相同的答案。它*感觉*哈克，但它确实有效。 – Drum

答

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

答

只需使用

line-height: 1;

负利润率从来没有有用的使用。只有真正的必须拥有。或给图片一个小小的毛利

答

我降低了图片使用百分比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>

答

难道这样的事情，你是后？根据需要随意使用边距和大小。

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>

答

问题是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>

top将文本与图像对齐

相关推荐