javascript - 获取表格单元格内容以在页面上向上移动

Question

好吧，我有一个奇怪的问题，试图对齐 2 列中的内容(使用 display:table 实现)，并使列 div 中的内容在顶部而不是底部。

这是我的问题 - 看到最右边的按钮/内容与该 div 的底部对齐:

这是如何实现的——我正在尝试这样做:

<div class="content">
                <div id = "centered">
                        <div id = "video">
                        <iframe style = "border-width: 0" width="600px" height="600px"
                        src="https://www.youtube.com/embed/nRG3wWeMqAQ?autoplay=1">
                        </iframe>
                    </div>
                </div>
                <div id = "righted">
                    <p id = "contentTxt"> <strong> Choose </strong>the option that sounds like you.</p>
                    <div class='button -dark'>im a user</div>
                    <div class='button -light'>im a store</div>
                </div>

CSS:

 .content #centered {
         padding-left: 280px;
     }

    /*Divides into 2 sections*/
    #righted {
        display: table-cell;
        padding-left: 2em;
    }

    #centered {
        width: 600px;
        display: table-cell;
        padding-left: 270px;
    }
    #content {
        display: table-row;
    }

在 righted 上，无论我对 margin-top、padding-top 或 top 做什么，它都停留在底部。我该如何解决这个问题？

Answer 1

设置垂直对齐让内容上移

#righted {
  vertical-align: top
}

并且您可能需要删除段落的边距，使其位于最顶部并且没有浏览器的默认边距

#righted p {
  margin-top: 0;
}