CODEWITHSUNDEEP
htmlcsscentering
AAM111
AAM111

Reputation: 1239

How can you center block elements?

I have a website with some <button> elements that I would like to be centered on the page: (They are displayed inline-block)

See below screenshot

enter image description here

EDIT: Here is code of the question:

HTML code:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="CSS/index.css">
    </head>
    <body>
        <!-- Start Header -->
        <div class="header">
            <nav>
                <a href="index.html"><button type="button">Home</button></a>
                <!--First Case (unnamed)-->
                <button type="button" disabled><span class="comingsoon">Coming soon!</span></button>
                <!--Second Case (unnamed)-->
                <button type="button" disabled><span class="comingsoon">Coming soon!</span></button>
                <a href="help.html"><button type="button">Help</button></a>
            </nav>
        </div>
        <!-- End Header -->
        <h1>Coming Soon!</h1>
    </body>
</html>

CSS code:

h1
{
    text-decoration: underline;
}
/* Common Header */
body
{
    background-color: #d5d5d5;
}
.header button
{
    background-color:#8C481B;
    text-align:center;
}
button span .comingsoon
{
    color:#dddddd;
}
button
{
    display:inline-block;
}

Upvotes: 1

Views: 728

Answers (4)

Sunniya Maini
Sunniya Maini

Reputation: 75

You can use a css property "text-align: center;" on class header or nav like:

.header {
    text-align: center;
}

or

nav {
    text-align: center;
}

You can choose one of the above solution.

And for your help, I am sharing one fiddle link as well. Please have a look. And let me know if you find anything incorrect. http://fiddle.jshell.net/8hkcnqy3/

Upvotes: 0

CY5
CY5

Reputation: 1580

You need to put the button inside div and then give div margin:0px auto which will make div center aligned so button are child element to it they will also get center aligned DEMO

#divBtn {
  width: 300px;
  margin: 0px auto;
  background: whitesmoke;
}
<div id="divBtn">
  <button>Submit1</button>
  <button>Submit1</button>
  <button>Submit1</button>
  <button>Submit1</button>
</div>

Upvotes: 1

Shudhansh Shekhar
Shudhansh Shekhar

Reputation: 720

Use this CSS: As your elements are wrapped in the header class, so use

.header nav{ 
  margin-right:auto; 
  margin-left:auto; 
  max-width:600px;
}

You may customise max-width according to your need.

Demo:

h1 {
  text-decoration: underline;
}
/* Common Header */

body {
  background-color: #d5d5d5;
}
.header button {
  background-color: #8C481B;
  text-align: center;
}
button span .comingsoon {
  color: #dddddd;
}
button {
  display: inline-block;
}
.header nav {
  margin-right: auto;
  margin-left: auto;
  max-width: 600px;
}
<html>

<head>
  <link rel="stylesheet" type="text/css" href="CSS/index.css">
</head>

<body>
  <!-- Start Header -->
  <div class="header">
    <nav>
      <a href="index.html">
        <button type="button">Home</button>
      </a>
      <!--First Case (unnamed)-->
      <button type="button" disabled><span class="comingsoon">Coming soon!</span>
      </button>
      <!--Second Case (unnamed)-->
      <button type="button" disabled><span class="comingsoon">Coming soon!</span>
      </button>
      <a href="help.html">
        <button type="button">Help</button>
      </a>
    </nav>
  </div>
  <!-- End Header -->
  <h1>Coming Soon!</h1>
</body>

</html>

Upvotes: 0

Alex
Alex

Reputation: 8695

Add text-align: center to nav

h1 {
  text-decoration: underline;
}
/* Common Header */

body {
  background-color: #d5d5d5;
}
.header button {
  background-color: #8C481B;
  text-align: center;
}
button span .comingsoon {
  color: #dddddd;
}
button {
  display: inline-block;
}
nav {
  text-align: center;
}
<html>

<head>
  <link rel="stylesheet" type="text/css" href="CSS/index.css">
</head>

<body>
  <!-- Start Header -->
  <div class="header">
    <nav>
      <a href="index.html">
        <button type="button">Home</button>
      </a>
      <!--First Case (unnamed)-->
      <button type="button" disabled><span class="comingsoon">Coming soon!</span>
      </button>
      <!--Second Case (unnamed)-->
      <button type="button" disabled><span class="comingsoon">Coming soon!</span>
      </button>
      <a href="help.html">
        <button type="button">Help</button>
      </a>
    </nav>
  </div>
  <!-- End Header -->
  <h1>Coming Soon!</h1>
</body>

</html>

Upvotes: 1

Related Questions