CODEWITHSUNDEEP
htmlcss
Sen Petersven
Sen Petersven

Reputation: 13

Html/Css dynamic centering

what I want to achieve is the following, I have 6 divs in the bottom which are aligned horizontal and have the rest of the screen size as equal margin left and right.

Now when the screen's width is to small to display them in one row, I want to display them in two rows (with 3 divs each). All of this is working right now, but when it becomes a two row layout the equal margin left and right is gone and they clip at the left of the screen.

Am I missing something ?

.container{
  z-index: 3;
  bottom: 20px;
  width: 100%;
  position: absolute;
}

.center-container{
  display: table;
  margin-right: auto;
  margin-left: auto;
}

.inner-container{
  display: inline-block;
}

.group-container{
  display: inline-block;
  margin-right: auto;
  margin-left: auto;
}

.element{
  display: inline-block;
  width: 150px;
  height: 150px;
  background-color: #000000
}
<div class="container">
  <div class="center-container">
      <div class="inner-container">
          <div class="group-container">
              <div class="element"></div>
              <div class="element"></div>
              <div class="element"></div>
          </div>
          <div class="group-container">
              <div class="element"></div>
              <div class="element"></div>
              <div class="element"></div>
          </div>
      </div>
  </div>
</div>

JsFiddle example of working one row layout: https://jsfiddle.net/7ef7xLhu/

JsFiddle example of non working two row layout: https://jsfiddle.net/9oc19oky/

Thank you in advance :)

Upvotes: 1

Views: 88

Answers (4)

Dhruvil21_04
Dhruvil21_04

Reputation: 2189

Just add this in your CSS and you are done. :)

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

You can refer to my link as well if you need.

https://jsfiddle.net/Dhruvil21_04/hadu5my3/

Upvotes: 0

user0910
user0910

Reputation: 13

Add text-align: center to the parent(inner-container). You should be sorted.

Upvotes: 0

athi
athi

Reputation: 1683

Added text-align: center; to .inner-container

.container {
  z-index: 3;
  bottom: 20px;
  width: 100%;
  position: absolute;
}

.center-container {
  display: table;
  margin-right: auto;
  margin-left: auto;
}

.inner-container {
  display: inline-block;
  text-align: center;
}

.group-container {
  display: inline-block;
  margin-right: auto;
  margin-left: auto;
}

.element {
  display: inline-block;
  width: 150px;
  height: 150px;
  background-color: #000000
}
<div class="container">
  <div class="center-container">
    <div class="inner-container">
      <div class="group-container">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
      </div>
      <div class="group-container">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

You can align them by setting text-align: center; to parent as they are inline-block elements by default they are align to the left.

.inner-container {
    display: inline-block;
    text-align: center;
}


.container {
  z-index: 3;
  bottom: 20px;
  width: 100%;
  position: absolute;
}

.center-container {
  display: table;
  margin-right: auto;
  margin-left: auto;
}

.inner-container {
  display: inline-block;
  text-align: center;
}

.group-container {
  display: inline-block;
  margin-right: auto;
  margin-left: auto;
}

.element {
  display: inline-block;
  width: 150px;
  height: 150px;
  background-color: #000000
}
<div class="container">
  <div class="center-container">
    <div class="inner-container">
      <div class="group-container">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
      </div>
      <div class="group-container">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions