垂直对齐html元素
[英]Vertical alignment html element
问题描述
I put image inside div->td element to show just below header. 
我将图像放在div-> td元素内以显示在标题下方。
<body>
<div class="page-header header">
<h1 class="page-header-text">thenwat</h1>
</div>
<table border="0" width="100%">
<tr>
<div class="left">
<td style="width:15%" valign= "top">
<div class="media">
<img class="media-object" src="http://placehold.it/200x200" alt="Profile pic">
</div>
</td>
</div>
</tr>
</table>
<body>
But it show small space between header and image. 但它显示标题和图像之间的空间很小。 what is it? 它是什么？
7 个解决方案
解决方案1
2 已采纳 2014-02-05 05:33:43
解决方案2
1 2014-02-05 05:32:34
remove all tables its not good practice 删除所有表不是一个好习惯
use div/li 使用div / li
set parent div style 'display:table' 设置父div样式“ display：table”
and set child div style display:table-cell;vertical-align: middle; 并设置子div样式显示：table-cell; vertical-align：middle;
解决方案3
1 2014-02-05 05:33:35
your .page-header is having margin. 您的.page-header具有边距。 remove that. 删除。
.page-header {
border-bottom: 1px solid #EEEEEE;
/* margin: 40px 0 20px;*/
padding-bottom: 9px;
}
解决方案4
0 2014-02-05 05:32:53
You have given margin in .page-header . 您已在.page-header提供了边距。 You can change .page-header css or overwrite css as you .header class already there 您可以更改.page-header CSS或覆盖已有的.header类，以覆盖CSS
解决方案5
0 2014-02-05 05:35:10
in youre css you find a css class named .page-header 在您的CSS中，您找到了一个名为.page-header的CSS类。
your code looks like 您的代码看起来像
.page-header {
border-bottom: 1px solid #EEEEEE;
margin: 40px 0 20px;
padding-bottom: 9px;
}
you just replace with 您只需替换为
.page-header {
border-bottom: 1px solid #EEEEEE;
margin: 40px 0 0;
}
i think it should work that you want 我认为它应该可以工作
解决方案6
0 2014-02-05 05:37:40
解决方案7
0 2014-02-05 05:41:47
如果您想使用相同的代码，则只需在代码中尝试行高CSS
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.