Question 292420 in Html Question posted in
Some basic documentation can be found here.

Html – How do I centre an icon at the top of my page?

I have inserted an icon into my html but it’s currently positioned to the left of my <body> content, how do I centre it and position it right at the top? I’m using this code in the <head>:

<link rel="" type="" href="">

I don’t know how to call it in css to edit it?

Tags:

2

Answers


  1. 0

    I am assuming that you are using an image and you want to center it. To do that you need to do the following.

         <style>
    .center {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 50%;
    }
    </style>
    <body>
    <img src="icon.png" alt="icon" class="center">
    </body>

    This will center the image by moving it from the left and the right.

    Login or Signup to reply.
  2. 0

    To center an icon at the top of a web page, you can use HTML and CSS. Here’s a simple example:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            align-items: top center;
            justify-content: center;
            min-height: 100vh;
        }

        .icon-container {
            text-align: center;
        }

        .icon {
            font-size: 36px; /* Adjust the size as needed */
            /* You can use other styles like color, margin, padding, etc. here */
        }
    </style>
    <title>Centered Icon</title>
</head>
<body>
    <div class="icon-container">
        <span class="icon">YourIconHere</span>
    </div>
</body>
</html>

    This example uses flexbox to center the icon vertically and horizontally within the viewport. The .icon-container class is used to center the text inside it, and the .icon class defines the styles for the icon. Adjust the font-size and other styles according to your preferences.

    Replace "YourIconHere" with the actual code or class for your icon. If you are using an icon library or an image, make sure to adjust the HTML accordingly.

    This is a basic example, and you may need to adapt it based on your specific requirements and the structure of your web page.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search