Change position The Custom Related List Button

Question

I'm creating custom related list for Files. I want to put custom button on center position instead of standard file upload button. I can put custom button, but the position does not move to center. The button is on the left position. How can I put it to center?

VF Page FileRelatedList

<apex:page>
    <apex:relatedList subject="{!$CurrentPage.parameters.id}"  list="AttachedContentDocuments" title="Files">
        <apex:facet name="header">
            <apex:outputPanel style="text-align:center;">
                <input type="button" class="btn" style="text-align:right;" value="doSomething" onclick="doSomething;"/>
            </apex:outputPanel>
        </apex:facet>
    </apex:relatedList>
</apex:page>

Access vf page https://login.salesforce.com/apex/FileRelatedList?id=XXXXXXXXXX

Answer 1

You can use Layout="block" to render it like a div. In normal case it renderas span and take minimal width. When you render it as div it take complete available with and then put the button in center.

<apex:outputPanel layout="block" style="text-align:center;">
    <input type="button" class="btn" style="text-align:right;" value="doSomething" onclick="doSomething;"/>
</apex:outputPanel>