Positioning all elements inside a div in the center

Question

I am practicing and made a short and simple dummy page. I am trying to place all the elements inside a div in the center. Here is the code -:

div {
  margin: auto;
}

div>a {
  padding: 20px;
  display: inline-block;
}

<div>
  <a href="#">Link1</a>
  <a href="#">Link2</a>
  <a href="#">Link3</a>
  <a href="#">Link4</a>
  <a href="#">Link5</a>
</div>

Here is the output -:

I want to place all the links in the center horizontally but I am unable to do it.

Any help would be great. Thanks.

read about flex - https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — Deepak gupta, Sep 27 '22 at 04:48
@Deepakgupta using `flexbox` for something elementary basic is "wasting time"... @connexo gave simple working solution... People just forget basics. — nelek, Sep 27 '22 at 04:51

score 2 · Accepted Answer · answered Sep 27 '22 at 04:52

A easy way for you to do this is to use display: flex on the parent element. I have created a little example for you:

.link-container {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

<div class="link-container">
  <a href="#">Link1</a>
  <a href="#">Link2</a>
  <a href="#">Link3</a>
  <a href="#">Link4</a>
  <a href="#">Link5</a>
</div>

Learning about flexbox will be very usefull. You will probably use it very often because it allows us to arrange items in rows or columns, to center them, to space them, ... Here is some information about it: Flexbox

Some information about my example

i gave you container a link-container class. This class name could be any thing you want. i prefer targeting elements in css by using classes, rather then using the div tag
i gave the parent element ("link-container") a display: flex`. This turns it into a flexbox element and will allow us to position the elements
i gave the link-container element a justify-content: center. This aligns the element inside a flexbox to the center (you could also try to use align-items: center to center the items vertically. Other useful options for the justify-content are flex-start, flex-end, space-between and space-around. More info here
I have added a gap to give a little space between each of the links. You can read more about gap here

score 1 · Answer 2 · answered Sep 27 '22 at 04:53

You just need to add width: fit-content; to the div wrapping the links. This would give it a definite width to which browser can then put margins.

Here it is in the working form:

<!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>Test34</title>
  <style>
    div {
      width: fit-content;
      margin: auto;
    }
    
    div>a {
      padding: 20px;
      display: inline-block;
    }
  </style>
</head>

<body>
  <div>
    <a href="#">Link1</a>
    <a href="#">Link2</a>
    <a href="#">Link3</a>
    <a href="#">Link4</a>
    <a href="#">Link5</a>
  </div>
</body>

</html>

score 1 · Answer 3 · answered Sep 27 '22 at 04:56

REPLACE YOUR STYLE BLOCK OF CODE WITH THIS.

    <style>
        div{
           margin:auto;
           text-align: center;
        }
        div>a{
            padding:20px;
            display: inline-block;
            }
    </style>

You need to align all the text in that div to center using text-align: center. It is a CSS property that will center the text element to center.

score 0 · Answer 4 · answered Sep 27 '22 at 04:51

0

div{ position: fixed; top: 50%; left: 50%; }

maybe you can try this in CSS

answered Sep 27 '22 at 04:51

min20120907

202
2
5

OP asked only for horizontal centering. OP did not ask for an element that won't be affected by scrolling. – connexo Sep 27 '22 at 04:55

Positioning all elements inside a div in the center

4 Answers4

REPLACE YOUR STYLE BLOCK OF CODE WITH THIS.