1

I've had a search on google and SE and can't seem to find a definitive answer.

How do I center a pageblock table header? It's nested like this: 

<div class="pbHeader">
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td class="pbTitle">
                <h2 class="mainTitle">Contact Made - 10%</h2>
            </td>
        </tr>
    </table>
</div>

I've tried setting text-align: center; on pbHeader and pbTitle, and I've also tried adding margin: 0 auto; on them both, I've tried .pbHeader table tr { text-align:center; } but every time I've had no luck.

I've resorted to adding 110% of left margin to .pbTitle but this isn't the best solution, it only works on my screen.

Can somebody please give me some ideas?

Improve this question

1 Answer 1

Reset to default
2

Actually the table generates two columns and if you want to center align the header you have to make it 100% width. Then text-align: center; will work as expected. Hope this helps.

<style type="text/css">
    .bPageBlock .pbTitle {
        width: 100%;    
        text-align: center;
    }
</style>
Improve this answer

You must log in to answer this question.