How can I put the button in the center?

Question

0.00/5 (No votes)

See more:

I want to put my button in the center,My codes is here:

HTML

 <div style="removed: relative; float: left; width: 250px">
    <fieldset>
        <legend>MyToys </legend>
        <div style="border-style: solid; border-color: rgb(235,235,235);">
            <div id='toydiv' style='background: red; height: 200px; width: 150px; float: left'>
                My<br>
                Toys<br>
                List<br>
                show</div>
            <div style='text-align: center; margin: 0'>
                <input type='button' value='Add'>
            </div>
        </div>
    </fieldset>
</div>

I try to add "text-align: center; margin: 0",but still fail.I want the result like this picture:picture

Posted 5-Sep-13 4:15am

PEIYANGXINQU

Add a Solution

Comments

Richard C Bishop 5-Sep-13 10:22am

Try removing the "Float: Left;" from your divs.

PEIYANGXINQU 5-Sep-13 10:32am

If I remove,the btton is in the bottom of the toydiv.I want that firstly the toydiv is in the left,and the button is in the right,and secondly the button is in the center of vertical in the right.

Richard C Bishop 5-Sep-13 10:37am

Remove text-align and float the button right then and use padding/margin to finish the positioning.

Dholakiya Ankit 5-Sep-13 23:45pm

remove marging 0 first and tell me status

PEIYANGXINQU 6-Sep-13 2:18am

It seems nothing has changed

Dholakiya Ankit 6-Sep-13 2:21am

left : some percentage working?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ankur^\m/ · Answer 1 · 2013-09-05T04:26:00

Solution 1

Text-align will align a text and not an html element. Enclose the button within center tag[^] and it will center align the button to the parent container.

Posted 5-Sep-13 4:26am

Ankur^\m/

Comments

Ankur^\m/ 5-Sep-13 10:29am

Be careful that it is deprecated in HTML 4.01. It's better to use CSS instead.

PEIYANGXINQU 5-Sep-13 10:35am

Hi,I use the center tag,but the result is like removing removing the "Float: Left;" .But I want that firstly the toydiv is in the left,and the button is in the right,and secondly the button is in the center of vertical in the right.Could you give me a sample?

Ankur^\m/ 5-Sep-13 12:37pm

1) Either use table and your first div will be inside first td and the button will be inside 2nd td. For the 2nd td set vertical alignment to center. This should solve your issue.
2) Use fixed width for both the divs. You may have to set float for the second one to right. I cannot tell for sure without trying. Use some tool (like firebug) to play with the CSS and get the right styles.
I would suggest use the 1st option as it's pretty easy.