How to Align Buttons Vertically

Written by jim campbell
  • Share
  • Tweet
  • Share
  • Email

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.

Skill level:

Things you need

  • Windows Notepad

Show MoreHide


  1. 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. 2

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

    <div id="buttons">


  3. 3

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

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


  4. 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.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.