Home>

In the case of the div tag, the center alignment can be done, but in the case of the link, only the font size and color change worked, and the center alignment could not be done.

<html>
  <head>
      <meta charset = "UTF-8">
      <title>Timetable registration site</title>
      <style type = "text/css">
            body {
                background-image: url (picture/background% 20picture1.jpg);
            }
            .top {
                font-size: 1.75rem;
                color: white;
                text-align: center;
            }
            a: link {
                font-size: 1.25rem;
                color: red;
                text-align: center;
            }
            a: visited {
                font-size: 1.25rem;
                color: yellow;
                text-align: center;
            }
      </style>
  </head>
  <body>
        Timetable registration site 
         Please select your year. 
         1st year version without search function 
         1st year search function/hand-made function added version 
         Second year or more without search function 
         2nd year or more Search function/Hand-made function added version  
  </body>
</html>
What I tried

I tried to center the entire tag with , but text-align didn't work.

  • Answer # 1

    Is it something like this?

    a {
      display: block;
      text-align: center;
      font-size: 1.25rem;
    }
    a: link {
      color: red;
    }
    a: visited {
      color: yellow;
    }

    This one may be better.

    a {
      display: block;
      width: max-content;
      margin: 0 auto;
      font-size: 1.25rem;
    }
    a: link {
      color: red;
    }
    a: visited {
      color: yellow;
    }

  • Answer # 2

    I tried to center the entire tag with , but text-align didn't work.

    Surrounded by thatdivTo the elementtext-alignDid you specify?

    
         1st year version without search function 
         1st year search function/hand-made function added version 
         Second year or more without search function 
         2nd year or more Search function/Hand-made function added version  
    
    .grades {
        text-align: center;
    }

    Now, four side by sideaYou should see the element in the center of the page.
    You may not know unless you widen the width of the browser enough.