Horizontal aligned buttons.
in ,

HTML/CSS: Align Buttons Horizontally Example

Learn how to code HTML and CSS to align the buttons horizontally for a page.

CSS Code

The following CSS code will set the properties for the class relative assigned to the div element. The main part of the below code is the CSS for class navitem. The class navitem will be assigned to the button element in the HTML code.

<style>
.relative {
 padding: 10px;
 position: relative;
 background-color: #fff;
 margin: 10px;
} 
.navitem {
  display: inline-block;
  width: 70px; 
  height: 30px; 
  text-align: center;
  border: gray;
  background-color: #E8562A;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
}
</style>

HTML Code

<body>
    <div class="relative">
        <h1>Align Buttons Horizontally Example</h1>
        <p>Here’s some content in the paragraph and the buttons
            <button class="navitem">Item 1</button>
            <button class="navitem">Item 2</button>
            <button class="navitem">Item 3</button>
        </p>
    </div>
</body>

Output

Align Buttons Horizontally Example

Here’s some content in the paragraph and the buttons

Complete HTML Example

<!DOCTYPE HTML>
<html>

<head>
    <style>
        .relative {
            padding: 10px;
            position: relative;
            background-color: #fff;
            margin: 10px;
        }
        
        .navitem {
            display: inline-block;
            width: 70px;
            height: 30px;
            text-align: center;
            border: gray;
            background-color: #E8562A;
            color: #fff;
            cursor: pointer;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="relative">
        <h1>Align Buttons Horizontally Example</h1>
        <p>Here’s some content in the paragraph and the buttons
            <button class="navitem">Item 1</button>
            <button class="navitem">Item 2</button>
            <button class="navitem">Item 3</button>
        </p>
    </div>
</body>

</html>

See also:

Written by Vinish Kapoor

An Oracle Apex Consultant, Oracle ACE, and founder of foxinfotech.org and orclqa.com a question and answer forum for developers. You can connect with me on Facebook and Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *