How to align all the elements to the center in CSS

Question

I created a Container to center all the elements using text-align: center; but for some reason it does not work. What am I doing wrong?

CODE

Attached is a link to Codepen

Thank you :)

https://codepen.io/omrybiton/pen/XWeErPr – Omry Biton Dec 31 '21 at 06:17 — Omry Biton, Dec 31 '21 at 06:17

score 1 · Answer 1 · answered Dec 31 '21 at 06:27

add margin: 0 auto; on container

.container {
  width: 1200px;
  margin: 0 auto;
  
}

.main-pic {
  float: right;
}

.text {
  width: 430px;
  float: right;
  background-color: #333;
  color: #f1f1f1;
  padding: 0 10px 0 10px;
  margin: 0 10px 0 10px;
  text-align: center;
}

aside {
  float: left;
}

<html dir="rtl">
<div class="container">
     
  <div class="main-pic">
    <img src="https://via.placeholder.com/428x274/cccccc/969696?text=428x274">
  </div>
   
   
  <div class="text">
      <p class="lorem">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda quis
        nemo suscipit itaque. Praesentium suscipit similique, laudantium velit
        qui dolores, eum possimus veritatis id aliquid delectus nesciunt
        voluptatem voluptas! Amet!
      </p>
  </div>
  
      <aside>
        <img src="https://via.placeholder.com/300x600/cccccc/969696?text=300+x+600" />
      </aside>
    </div>

And if I did not set a width of 1200px in the container, how was I supposed to align it to the center? — Omry Biton, Dec 31 '21 at 06:43

score 1 · Answer 2 · answered Dec 31 '21 at 06:36

1

You can use display flex on the container to center child elements.

.parent {
  background: #dedede;
  width: 300px;
  height: 200px;
  display: flex;
  justify-content: center;
}

<div class='parent'>
  <p>Hello world</p>
</div>

answered Dec 31 '21 at 06:36

Akshay Dhankar

62
4

thank you . We are now learning the float :) – Omry Biton Dec 31 '21 at 06:45

How to align all the elements to the center in CSS

2 Answers2