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

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.

How can I put the button in the center?

1 solution

Solution 1

Add your solution here

Preview 0

How can I put the button in the center?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us