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

Html – I am not able to align the divs

I can’t seem to find a way to align them.
I was expecting for the divs to automatically align, but they didn’t.
Could somebody provide me with the code for them to align, stop at the end border of the page and automatically space apart? I was at least able to space the divs apart when they come right beside eachother.

.d-flex {
  display: flex;
}

.gap-20 {
  gap: 20px;
}

/* The secret sauce that enables gradient rotation. NOTE: does not work in all browsers. https://caniuse.com/?search=%40property */

@property --border-angle-1 {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --border-angle-2 {
  syntax: "<angle>";
  inherits: true;
  initial-value: 90deg;
}

@property --border-angle-3 {
  syntax: "<angle>";
  inherits: true;
  initial-value: 180deg;
}


/* sRGB color. */

:root {
  --bright-blue: rgb(0, 100, 255);
  --bright-green: rgb(0, 255, 0);
  --bright-red: rgb(255, 0, 0);
  --background: black;
  --foreground: white;
  --border-size: 2px;
  --border-radius: 0.75em;
}


/* Display-P3 color, when supported. */

@supports (color: color(display-p3 1 1 1)) {
   :root {
    --bright-blue: color(display-p3 0 0.2 1);
    --bright-green: color(display-p3 0.4 1 0);
    --bright-red: color(display-p3 1 0 0);
  }
}

@keyframes rotateBackground {
  to {
    --border-angle-1: 360deg;
  }
}

@keyframes rotateBackground2 {
  to {
    --border-angle-2: -270deg;
  }
}

@keyframes rotateBackground3 {
  to {
    --border-angle-3: 540deg;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  min-height: 100dvh;
  display: grid;
  place-content: center;
  margin: 0;
  font-family: "Aspekta";
}

button {
  --border-angle-1: 0deg;
  --border-angle-2: 90deg;
  --border-angle-3: 180deg;
  color: inherit;
  font-size: calc(0.8rem + 4vmin);
  font-family: inherit;
  border: 0;
  padding: var(--border-size);
  display: flex;
  width: max-content;
  border-radius: var(--border-radius);
  background-color: transparent;
  background-image: conic-gradient( from var(--border-angle-1) at 10% 15%, transparent, var(--bright-blue) 10%, transparent 30%, transparent), conic-gradient( from var(--border-angle-2) at 70% 60%, transparent, var(--bright-green) 10%, transparent 60%, transparent), conic-gradient( from var(--border-angle-3) at 50% 20%, transparent, var(--bright-red) 10%, transparent 50%, transparent);
  animation: rotateBackground 3s linear infinite, rotateBackground2 8s linear infinite, rotateBackground3 13s linear infinite;
}


/* Change this background to transparent to see how the gradient works */

button div {
  background: var(--background);
  padding: 1em 1.5em;
  border-radius: calc(var(--border-radius) - var(--border-size));
  color: var(--foreground);
}
<!DOCTYPE html>
<html>
<head>
    <title>techguyaj24's GameVerse!</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<div class="d-flex gap-20">
  <div>
    <a href="/doge-miner">
      <button>
    <div>
        <img src="/img/doge-coin.png">
        <center>Doge Miner</center>
    </div>
</button>
    </a>
  </div>


  <div>
    <a href="/n-gon">
      <button>
    <div>
        <img src="/img/ngon-bot.png">
        <center>N-Gon</center>
    </div>
</button>
    </a>
    <div class="d-flex gap-20">
  <div>
    <a href="/2048">
      <button>
    <div>
        <img src="/img/2048.png">
        <center>2048</center>
    </div>
</button>
    </a>
  </div>
  <div>
    <a href="/chrome-dino">
      <button>
    <div>
        <img src="/img/dino.png">
        <center>Chrome Dino</center>
    </div>
</button>
    </a>
  </div>
  </div>
</div>
</body>
</html>
Tags:

2

Answers


  1. 0

    I made some changes to your HTML and CSS to align the cards. I removed some CSS and classes and added new code. However, I’m not sure if this is how you want the cards to be aligned. So, take this as an example, compare it with your code, and make changes according to your requirements.

    :root {
    --bright-blue: rgb(0, 100, 255);
    --bright-green: rgb(0, 255, 0);
    --bright-red: rgb(255, 0, 0);
    --background: black;
    --foreground: white;
    --border-size: 2px;
    --border-radius: 0.75em;
}

.cards {
    padding: 2rem 0;
    place-items: center;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
}

.card button {
    width: 15rem;
}

/* The secret sauce that enables gradient rotation. 
   NOTE: Does not work in all browsers. https://caniuse.com/?search=%40property */

@property --border-angle-1 {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
}

@property --border-angle-2 {
    syntax: "<angle>";
    inherits: true;
    initial-value: 90deg;
}

@property --border-angle-3 {
    syntax: "<angle>";
    inherits: true;
    initial-value: 180deg;
}

/* Display-P3 color, when supported. */

@supports (color: color(display-p3 1 1 1)) {
    :root {
        --bright-blue: color(display-p3 0 0.2 1);
        --bright-green: color(display-p3 0.4 1 0);
        --bright-red: color(display-p3 1 0 0);
    }
}

@keyframes rotateBackground {
    to {
        --border-angle-1: 360deg;
    }
}

@keyframes rotateBackground2 {
    to {
        --border-angle-2: -270deg;
    }
}

@keyframes rotateBackground3 {
    to {
        --border-angle-3: 540deg;
    }
}

body {
    background: var(--background);
    color: var(--foreground);
    margin: 0;
    font-family: "Aspekta";
}

button {
    --border-angle-1: 0deg;
    --border-angle-2: 90deg;
    --border-angle-3: 180deg;
    color: inherit;
    font-size: calc(0.8rem + 4vmin);
    font-family: inherit;
    border: 0;
    padding: var(--border-size);
    border-radius: var(--border-radius);
    background-color: transparent;
    background-image: conic-gradient(
            from var(--border-angle-1) at 10% 15%,
            transparent,
            var(--bright-blue) 10%,
            transparent 30%,
            transparent
        ),
        conic-gradient(
            from var(--border-angle-2) at 70% 60%,
            transparent,
            var(--bright-green) 10%,
            transparent 60%,
            transparent
        ),
        conic-gradient(
            from var(--border-angle-3) at 50% 20%,
            transparent,
            var(--bright-red) 10%,
            transparent 50%,
            transparent
        );
    animation: rotateBackground 3s linear infinite,
        rotateBackground2 8s linear infinite,
        rotateBackground3 13s linear infinite;
}

/* Change this background to transparent to see how the gradient works */

button div {
    background: var(--background);
    padding: 1em 1.5em;
    border-radius: calc(var(--border-radius) - var(--border-size));
    color: var(--foreground);
}
    <!DOCTYPE html>
<html>
    <head>
        <title>techguyaj24's GameVerse!</title>
        <link rel="stylesheet" href="/css/style.css" />
    </head>

    <body>
        <div class="cards">
            <div class="card">
                <a href="/doge-miner">
                    <button>
                        <div>
                            <img src="/img/doge-coin.png" />
                            <center>Doge Miner</center>
                        </div>
                    </button>
                </a>
            </div>

            <div class="card">
                <a href="/n-gon">
                    <button>
                        <div>
                            <img src="/img/ngon-bot.png" />
                            <center>N-Gon</center>
                        </div>
                    </button>
                </a>
            </div>

            <div class="card">
                <a href="/2048">
                    <button>
                        <div>
                            <img src="/img/2048.png" />
                            <center>2048</center>
                        </div>
                    </button>
                </a>
            </div>

            <div class="card">
                <a href="/chrome-dino">
                    <button>
                        <div>
                            <img src="/img/dino.png" />
                            <center>Chrome Dino</center>
                        </div>
                    </button>
                </a>
            </div>
        </div>
    </body>
</html>

    In this code, you can clearly see that I have removed the display: flex; CSS styling and used CSS grid to accomplish this.

    Hope this make sense..!

    Login or Signup to reply.
  2. 0

    I checked your code and updated some styles and layout of the elements.

    CSS style

    .d-flex {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
  
  .gap-20 {
    gap: 20px;
  }
  
  /* The secret sauce that enables gradient rotation. NOTE: does not work in all browsers. https://caniuse.com/?search=%40property */
  
  @property --border-angle-1 {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
  }
  
  @property --border-angle-2 {
    syntax: "<angle>";
    inherits: true;
    initial-value: 90deg;
  }
  
  @property --border-angle-3 {
    syntax: "<angle>";
    inherits: true;
    initial-value: 180deg;
  }
  
  
  /* sRGB color. */
  
  :root {
    --bright-blue: rgb(0, 100, 255);
    --bright-green: rgb(0, 255, 0);
    --bright-red: rgb(255, 0, 0);
    --background: black;
    --foreground: white;
    --border-size: 2px;
    --border-radius: 0.75em;
  }
  
  
  /* Display-P3 color, when supported. */
  
  @supports (color: color(display-p3 1 1 1)) {
     :root {
      --bright-blue: color(display-p3 0 0.2 1);
      --bright-green: color(display-p3 0.4 1 0);
      --bright-red: color(display-p3 1 0 0);
    }
  }
  
  @keyframes rotateBackground {
    to {
      --border-angle-1: 360deg;
    }
  }
  
  @keyframes rotateBackground2 {
    to {
      --border-angle-2: -270deg;
    }
  }
  
  @keyframes rotateBackground3 {
    to {
      --border-angle-3: 540deg;
    }
  }
  
  body {
    background: var(--background);
    color: var(--foreground);
    min-height: 100dvh;
    display: grid;
    place-content: center;
    margin: 0;
    font-family: "Aspekta";
  }
  
  button {
    --border-angle-1: 0deg;
    --border-angle-2: 90deg;
    --border-angle-3: 180deg;
    color: inherit;
    font-size: calc(0.8rem + 4vmin);
    font-family: inherit;
    border: 0;
    padding: var(--border-size);
    display: flex;
    width: max-content;
    border-radius: var(--border-radius);
    background-color: transparent;
    background-image: conic-gradient( from var(--border-angle-1) at 10% 15%, transparent, var(--bright-blue) 10%, transparent 30%, transparent), conic-gradient( from var(--border-angle-2) at 70% 60%, transparent, var(--bright-green) 10%, transparent 60%, transparent), conic-gradient( from var(--border-angle-3) at 50% 20%, transparent, var(--bright-red) 10%, transparent 50%, transparent);
    animation: rotateBackground 3s linear infinite, rotateBackground2 8s linear infinite, rotateBackground3 13s linear infinite;
  }
  
  
  /* Change this background to transparent to see how the gradient works */
  
  button div {
    background: var(--background);
    padding: 1em 1.5em;
    border-radius: calc(var(--border-radius) - var(--border-size));
    color: var(--foreground);
  }

    Layout

    <!DOCTYPE html>
<html>
    <head>
        <title>techguyaj24's GameVerse!</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="d-flex gap-20">
            <div>
                <a href="/doge-miner">
                    <button>
                        <div>
                            <img src="/img/doge-coin.png">
                            <center>Doge Miner</center>
                        </div>
                    </button>
                </a>
            </div>

            <div>
                <a href="/n-gon">
                    <button>
                        <div>
                            <img src="/img/ngon-bot.png">
                            <center>N-Gon</center>
                        </div>
                    </button>
                </a>
            </div>

            <div>
                <a href="/2048">
                    <button>
                        <div>
                            <img src="/img/2048.png">
                            <center>2048</center>
                        </div>
                    </button>
                </a>
            </div>

            <div>
                <a href="/chrome-dino">
                    <button>
                        <div>
                            <img src="/img/dino.png">
                            <center>Chrome Dino</center>
                        </div>
                    </button>
                </a>
            </div>
        </div>
    </body>
</html>

    Result
    enter image description here

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

Back To Top
Search