Question 195495 in CSS Question posted in
Some basic documentation can be found here.

Css – how to center the elements that are inside a box

I need to center the elements that are inside a box. I tried to achieve it by using justify-content:center; but it is not working. What else can i do? here is the css code. Notice that I have already used the justify-content:center; to bring the boxes to the center of the page
This is the output image

Tags:

2

Answers


  1. 0

    From the documentation that no one reads:

    The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.

    Therefore you should be using Flexbox, add:

    display: flex;

    Then whatever you want to do, which in the case of OP is:

    justify-content: center;
    Login or Signup to reply.
  2. 0

    Let’s say you have a box, it consists of a span tag with some text in it then do the following to center the text inside the box.

    .box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
    <div class="box">
  <span class="text">Hello!</span>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search