居中放置一个表格并对齐一个div [英] Center a table and align right a div

查看:141
本文介绍了居中放置一个表格并对齐一个div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我没有太大的机会将pageLinks表居中并将pagingDiv div内的goToPage div对齐。我需要将这两个元素放置在相同的垂直水平。

 < div id =pagingDivstyle =border:1px solid black; width:100 %;> 
< tbody>
< tr>
< td>
< / td>
< td>
< a href =#firsttitle =点击进入第二页> 2< / a>
< / td>
< / tr>
< / tbody>
< / table>
< div id =goToPagestyle =float:right> &安培; NBSP;第3页,共42页|第#页:< input style =height:14px; width:21px; /> < a href =#go> GO< / a>< / div>
< / div>


解决方案

移动HTML表格前的goToPage div:

 < div id =pagingDivstyle =border:1px solid black; width:100%;> 
< div id =goToPagestyle =float:right>& nbsp;第3页,共42页|第#页:
< input style =height:14px; width:21px; /> < a href =#go> GO< / a>
< / div>
< tbody>
< tr>
< td> < a href =#firsttitle =点击进入第一页。> 1< / a>

< / td>
< td> < a href =#firsttitle =点击进入第二页> 2< / a>

< / td>
< / tr>
< / tbody>
< / table>
< / div>

jsFiddle示例

I'm not having much luck in centering the pageLinks table and right align the goToPage div within the pagingDiv div. I needs these two element positioned at the same vertical level. any help would be appreciated.

<div id="pagingDiv" style="border:1px solid black; width:100%;">
    <table id="pageLinks" style="border:1px solid black; margin:auto;" >
        <tbody>
            <tr>
                <td>
                    <a href="#first" title="Click to go to first page.">1</a>
                </td>
                <td>
                    <a href="#first" title="Click to go to second page.">2</a>
                </td>
            </tr>
        </tbody>
    </table>                  
    <div id="goToPage" style="float:right"> &nbsp; Page 3 of 42 | Page#: <input style="height:14px;width:21px;" /> <a href="#go">GO</a></div>                  
</div>

解决方案

Move the goToPage div before the table in your HTML:

<div id="pagingDiv" style="border:1px solid black; width:100%;">
    <div id="goToPage" style="float:right">&nbsp; Page 3 of 42 | Page#:
        <input style="height:14px;width:21px;" /> <a href="#go">GO</a>
    </div>
    <table id="pageLinks" style="border:1px solid black; margin:auto;">
        <tbody>
            <tr>
                <td> <a href="#first" title="Click to go to first page.">1</a>

                </td>
                <td> <a href="#first" title="Click to go to second page.">2</a>

                </td>
            </tr>
        </tbody>
    </table>
</div>

jsFiddle example

这篇关于居中放置一个表格并对齐一个div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆