0

I've tried so many different ways now but I can't seem to grasp the way to do it. Basically, from my code below, The h1 and h2 elements have a gold and black background respectively. I've set the width of them to be 500px but the thing is, they just sit at the top left corner of the page. Even though I have text-align: center, I don't see why it won't go to the middle.

h1, h2 {    
    width:500px;
    text-align: center;
   }
   
h1 {
    background-color: goldenrod;
    margin: 5px;
}
h2 {
    margin: 5px;
    color: goldenrod;
    background-color: black;
   }

.content-table {
    font-family: Helvetica;
    border-collapse:collapse;
    font-size: 0.9em;
    min-width: 400px;
    border-radius: 5px 5px 5px 5px;
    overflow: hidden;
    box-shadow: -5px 5px 14px black;
    margin: auto;    
}

.content-table thead tr {
    background-color: goldenrod;
    font-size: 1.5em;
    color: black;
    text-align: left;
    font-weight: bold;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Table Reference Cheat Sheet</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <h1>HTML Table Reference</h1>
    <h2>Table Tags</h2>

    <table class="content-table">
        <thead>
            <tr>
              <th>Tag</th>
              <th>Name</th>
              <th>Description</th>
            </tr>
            
        </thead>

        <tbody>
            <tr>
                <td><span class="code">&lttable&gt</span></td> 
                <td>Table</td>
                <td>The wrapper element for all HTML tables.</td>
            </tr>

            <tr>
                <td><span class="code">&lthead&gt</span></td>
                <td>Table Head</td>
                <td>The set of rows defining the column headers in a table.</td>
            </tr>

            <tr>
                <td><span class="code">&ltbody&gt</span></td>
                <td>Table Body</td>
                <td>The set of rows containing actual table data.</td>
            </tr>

            <tr>
                <td><span class="code">&lttr&gt</span></td>
                <td>Table Row</td>
                <td>The table row container.</td>
            </tr>

            <tr>
                <td><span class="code">&lttd&gt</span></td>
                <td>Table Data</td>
                <td>The table data container.</td>
            </tr>

            <tr>
                <td><span class="code">&ltfoot&gt</span></td>
                <td>Table Foot</td>
                <td>The set of rows defining the footer in a table.</td>
            </tr>
        </tbody>




    </table>


    
</body>
</html>
Chris W.
  • 22,835
  • 3
  • 60
  • 94
David Boss
  • 27
  • 5
  • 1
    You have centered the text within the h1 and the h2 elements. You haven't centered those elements. You may find flex and justify-content helpful. – A Haworth Jan 24 '22 at 20:53
  • This: `text-align: center;` is a declaration of how the _inline contents_ of the element will display. It's not a declaration of how the element itself will display. For block-level elements like `

    ` you can use (amongst other approaches) `margin: 0 auto;`

     – Rounin Jan 24 '22 at 20:57

2 Answers2

2

I add div with class: header, then put all the HTML there and set it to flex, that it will be in the center (justify-content: center, align-items: center, and flex-flow: column because the default is row.)

.header{
display:flex;
justify-content:center;
align-items:center;
flex-flow:column;

  .header h1, h2 {    
        width:500px;
        text-align: center;
       }
       
   .header h1 {
        background-color: goldenrod;
        margin: 5px;
    }
   .header h2 {
        margin: 5px;
        color: goldenrod;
        background-color: black;
       }

    .content-table {
        font-family: Helvetica;
        border-collapse:collapse;
        font-size: 0.9em;
        min-width: 400px;
        border-radius: 5px 5px 5px 5px;
        overflow: hidden;
        box-shadow: -5px 5px 14px black;
        margin: auto;    
    }

    .content-table thead tr {
        background-color: goldenrod;
        font-size: 1.5em;
        color: black;
        text-align: left;
        font-weight: bold;
    }
        <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML Table Reference Cheat Sheet</title>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
<div class="header">
        <h1>HTML Table Reference</h1>
        <h2>Table Tags</h2>

        <table class="content-table">
            <thead>
                <tr>
                  <th>Tag</th>
                  <th>Name</th>
                  <th>Description</th>
                </tr>
                
            </thead>

            <tbody>
                <tr>
                    <td><span class="code">&lttable&gt</span></td> 
                    <td>Table</td>
                    <td>The wrapper element for all HTML tables.</td>
                </tr>

                <tr>
                    <td><span class="code">&lthead&gt</span></td>
                    <td>Table Head</td>
                    <td>The set of rows defining the column headers in a table.</td>
                </tr>

                <tr>
                    <td><span class="code">&ltbody&gt</span></td>
                    <td>Table Body</td>
                    <td>The set of rows containing actual table data.</td>
                </tr>

                <tr>
                    <td><span class="code">&lttr&gt</span></td>
                    <td>Table Row</td>
                    <td>The table row container.</td>
                </tr>

                <tr>
                    <td><span class="code">&lttd&gt</span></td>
                    <td>Table Data</td>
                    <td>The table data container.</td>
                </tr>

                <tr>
                    <td><span class="code">&ltfoot&gt</span></td>
                    <td>Table Foot</td>
                    <td>The set of rows defining the footer in a table.</td>
                </tr>
            </tbody>




        </table>

</div>
        
    </body>
    </html>
Yarin Levi
  • 201
  • 1
  • 10
1

text-align: center is doing what it's supposed to, centering the text in the H1 and H2 elements. If you also want to center the elements themselves you can do that since you gave them a width of 500px. Just set the left and right margins to auto:

h1,
h2 {
  width: 500px;
  text-align: center;
}

h1 {
  background-color: goldenrod;
  margin: 5px auto;
}

h2 {
  margin: 5px auto;
  color: goldenrod;
  background-color: black;
}

.content-table {
  font-family: Helvetica;
  border-collapse: collapse;
  font-size: 0.9em;
  min-width: 400px;
  border-radius: 5px 5px 5px 5px;
  overflow: hidden;
  box-shadow: -5px 5px 14px black;
  margin: auto;
}

.content-table thead tr {
  background-color: goldenrod;
  font-size: 1.5em;
  color: black;
  text-align: left;
  font-weight: bold;
}
<h1>HTML Table Reference</h1>
<h2>Table Tags</h2>
<table class="content-table">
  <thead>
    <tr>
      <th>Tag</th>
      <th>Name</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span class="code">&lttable&gt</span></td>
      <td>Table</td>
      <td>The wrapper element for all HTML tables.</td>
    </tr>
    <tr>
      <td><span class="code">&lthead&gt</span></td>
      <td>Table Head</td>
      <td>The set of rows defining the column headers in a table.</td>
    </tr>
    <tr>
      <td><span class="code">&ltbody&gt</span></td>
      <td>Table Body</td>
      <td>The set of rows containing actual table data.</td>
    </tr>
    <tr>
      <td><span class="code">&lttr&gt</span></td>
      <td>Table Row</td>
      <td>The table row container.</td>
    </tr>
    <tr>
      <td><span class="code">&lttd&gt</span></td>
      <td>Table Data</td>
      <td>The table data container.</td>
    </tr>
    <tr>
      <td><span class="code">&ltfoot&gt</span></td>
      <td>Table Foot</td>
      <td>The set of rows defining the footer in a table.</td>
    </tr>
  </tbody>
</table>
j08691
  • 204,283
  • 31
  • 260
  • 272