Question

我将图片放在div-＆gt; td元素中，以显示在标题下方。

小提琴：Link

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

但是它显示了标题和图像之间的小空间。它是什么？

Answer 1

我相信它只是.header的一小部分。

Fiddle

<强> CSS

.header{margin-bottom:0}

Answer 2

删除所有表格不好的做法
使用div / li

设置父div样式'display：table'
并设置子div样式 display：table-cell; vertical-align：middle;

Answer 3

您的.page-header有保证金。删除它。

.page-header {
    border-bottom: 1px solid #EEEEEE;
   /* margin: 40px 0 20px;*/
    padding-bottom: 9px;
}

Answer 4

您已在.page-header中获得保证金。您可以更改.page-header css或覆盖css，因为.header类已存在

Working Demo

Answer 5

在你的CSS中你找到一个名为.page-header

的css类

您的代码看起来像

.page-header {
    border-bottom: 1px solid #EEEEEE;
    margin: 40px 0 20px;
    padding-bottom: 9px;
}

你只需用

替换

.page-header {
    border-bottom: 1px solid #EEEEEE;
    margin: 40px 0 0;
}

我认为它应该可以使用

Answer 6

.page-header有保证金。给margin: 40px 0px 0px 0px;

<强> DEMO

<div class="page-header header" style="margin: 40px 0px 0px 0px;">

Answer 7

如果您想使用相同的代码，只需在标记中尝试使用line-height css

垂直对齐html元素

7 个答案:

Fiddle