Question

<div style="text-align:center;">
        <select id="sponsorList"></select>&nbsp;<img alt="Loading..." src="../../Img/ajax-loader.gif" id="loader" />
        <span style="display:none;" id="selectedSponsorId"></span>
        <div id="sponsorRowDetails" style="margin-left:auto; margin-right:auto;">
            <table>
                <tbody>
                    <tr>
                        <td>Effective Date: </td>
                        <td><input type="text" id="startDate" /><br /></td>
                    </tr>
                    <tr>
                        <td>End Date: </td>
                        <td><input type="text" id="endDate" /></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

因此select框位于中心位置，但我无法将sponsorRowDetails中心内的所有内容对齐。

我对这样的简单CSS事情感到很糟糕。我究竟做错了什么？我还尝试了text-align:center;与另一个div，以及将表直接保留在第一个div中。

Answer 1

请为赞助商详细信息div

中的表格执行此操作

<table align="center" style="margin: 0 auto;">

Answer 2

给<table>一个宽度然后应用margin:0 auto;，这将使表格集中在容器中。

Answer 3

你的问题是div默认是它的父级宽度的100％。因此，在宽度为100％时设置margin: 0 auto;将不会执行任何操作。如果你想要居中它，你需要给div一个宽度，然后你可以在margin: auto;上应用text-align: center;否则设置sponsorRowDetails

将div与页面中心对齐

3 个答案: