简体   繁体   中英

How can I vertically center this content?

I know there are a bunch of questions about this already but none of the solutions actually work for my particular situation. This is what the layout looks like without any fixes for vertical centering: http://jsfiddle.net/4FsKG/9/

This is with tr#toolBar : height and line-height set to 2.25em : http://jsfiddle.net/4FsKG/10/ . This centers everything but the border around my page numbers results in a gap that you can easily notice under the borders on the left. In addition, the border takes up the whole height of the cell instead of just being around the numbers as intended.

I've tried numerous other solutions to the problem but all of them end up as some variation of the two examples I've already shown.

I would like everything in the row to be centered vertically while allowing me to put a border around things like my page numbers. Anyone have any ideas?

The CSS for my example:

table {
    background-color:#274F68;
    font-size:0.85em;
    white-space:nowrap;
    border-collapse:separate;
    border:1px solid #274F68;
    border-radius:6px 6px 6px 6px;
    -moz-border-radius:6px 6px 6px 6px;
    -webkit-border-radius:6px 6px 6px 6px;
}

tr#input td { border-bottom:2px solid #6189A3; }

    tr#input td form {
        float:right;        
    }

tr#toolBar { 
    font-family:Arial;
    background-color:#152939;
    color:#6189A3;
}

    tr#toolBar td { border-bottom:2px solid #6189A3; }

        tr#toolBar td a {
            padding:0;
            margin:0 3px 0 3px;
        }

.dataTables_length { float:left;}
.dataTables_info { float:left; }
.dataTables_filter { float:right; }
.dataTables_paginate { float:right; }

.paging_full_numbers a.paginate_button,
.paging_full_numbers a.paginate_active {
    float:left;
    border: 1px solid #6189A3;
}

Just replace floats with display:inline-block with vertical-align:middle and that will do the trick: http://jsfiddle.net/4FsKG/42/

But don't forget to also add _display: inline; zoom:1; _display: inline; zoom:1; if you want to support IE7 and below.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM