How to Align Buttons Vertically

by Jim Campbell

HTML "div" tags let you align form elements such as buttons both vertically and horizontally. The HTML div tag formats data, so it aligns with other elements on your web pages. If you have several buttons on the page, you encompass them within a div tag to align them all vertically on the page. You can edit your HTML page and implement the tag using Windows Notepad.

1

Right-click the HTML page for your website and select "Open With." Double-click "Notepad" in the opened window to open the page in your text editor.

2

Scroll down the page to the section that contains your buttons. Wrap the button code with the following tags:

<div id="buttons"> </div>

3

Add the vertical alignment code for your buttons. The following code vertically aligns the buttons in the center of the div tag:

<div id="buttons" style="vertical-align: center"> </div>

4

Click the Notepad "File" menu item and select "Save." Double-click it to open the changes in your default web browser and test your new code changes.

Items you will need

About the Author

Jim Campbell has been a computer engineer for over five years. He excels in hardware repair, computer programming and troubleshooting, and software design. He is currently attending Florida Atlantic University, pursuing a master's degree in computer and electrical engineering and fine-tuning his technical writing abilities.