How to center an display:inline-block section

Question

Note: Not duplicate of CSS center display inline block?

This is my fiddle:

body {
  max-width:400px;
}

.scroll {
  overflow: auto;
  white-space: nowrap;
}
.card {
display:inline-block;
width:240px;
 list-style-type:none;
}

<section class="scroll">
      <ol>
       <li class="card">
        <a href="#">
     
     <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg" />
     
     </a>
     
     <p class="castname"><a href="#">Aamir Khan</a></p>
     
    </li>
  
    
    <li class="card">
        <a href="#">
     
     <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
     
     </a>
     
     <p class="castname"><a href="#">Aamir Khan</a></p>
     
    </li>
    
    <li class="card">
        <a href="#">
     
     <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
     
     </a>
     
     <p class="castname"><a href="#">Aamir Khan</a></p>
     
    </li>
    
    <li class="card">
        <a href="#">
     
     <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
     
     </a>
     
     <p class="castname"><a href="#">Aamir Khan</a></p>
     
    </li>
    
    <li class="card">
        <a href="#">
     
     <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
     
     </a>
     
     <p class="castname"><a href="#">Aamir Khan</a></p>
     
    </li>
  
 
         </ol>
 
 
 </section>
  
  
  </div>

I tried display:block;margin:auto in outer div. I tried position:relative;left:50%;transform:translate(-50%)

I tried text-align:center;

But nothing seems to work. Is it even possible?

Thanks in advance guys :)

Firstly, there is not a single div in your code, let alone an outer div. Secondly, what needs to be centered? — Gerard, Jun 24 '17 at 09:05

Ehsan · Answer 1 · 2017-06-24T09:24:39.883

0

.cards are chidrens scroll and them have display:inline-block; so better way is use of text-align property.Like this:

.scroll {
  text-align:center;
  //More Code...
}

Demo

edited Jun 24 '17 at 09:24

answered Jun 24 '17 at 08:59

Ehsan

12,655
3
25
44

Oh, But there is no text in scroll class. Why it works? – John Doo Jun 24 '17 at 09:10

score 0 · Accepted Answer · answered Jun 24 '17 at 09:00

try , justify-content : center; or align-items: center; it will bring your content center

if you want to bring your text center , use text-align:center in your .scroll class

body {
  max-width:400px;
}

.scroll {
  overflow: auto;
  white-space: nowrap;
  text-align: center;
}
.card {
display:inline-block;
align-items: center;
width:240px;
 list-style-type:none;
}

<section class="scroll">
      <ol>
       <li class="card">
        <a href="#">
     
     <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg" />
     
     </a>
     
     <p class="castname"><a href="#">Aamir Khan</a></p>
     
    </li>
  
    
    <li class="card">
        <a href="#">
     
     <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
     
     </a>
     
     <p class="castname"><a href="#">Aamir Khan</a></p>
     
    </li>
    
    <li class="card">
        <a href="#">
     
     <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
     
     </a>
     
     <p class="castname"><a href="#">Aamir Khan</a></p>
     
    </li>
    
    <li class="card">
        <a href="#">
     
     <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
     
     </a>
     
     <p class="castname"><a href="#">Aamir Khan</a></p>
     
    </li>
    
    <li class="card">
        <a href="#">
     
     <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
     
     </a>
     
     <p class="castname"><a href="#">Aamir Khan</a></p>
     
    </li>
  
 
         </ol>
 
 
 </section>
  
  
  </div>

scroll was presented as root class for entire div. text-align center will work on text. thats why it works. if you added any text inside it will apply the same on it — Mohideen bin Mohammed, Jun 24 '17 at 11:21

score 0 · Answer 3 · answered Jun 24 '17 at 09:10

You need to add the following code to your CSS.

ol {
  padding-left: 0;
}

That will get rid of the space on the left hand side, which belongs to the ol and not any of the li elements.

Jsfiddle

body {
  max-width:400px;
}

.scroll {
  overflow: auto;
  white-space: nowrap;
}

ol {
  padding-left: 0;
}

.card {
display:inline-block;
width:240px;
 list-style-type:none;
}

<section class="scroll">
      <ol>
       <li class="card">
        <a href="#">
     <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg" />
     </a>
     <p class="castname"><a href="#">Aamir Khan</a></p>
    </li>
    <li class="card">
        <a href="#">
     <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
     </a>
     <p class="castname"><a href="#">Aamir Khan</a></p>
    </li>
    <li class="card">
        <a href="#">
     <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
     </a>
     <p class="castname"><a href="#">Aamir Khan</a></p>
    </li>
    <li class="card">
        <a href="#">
     <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
     </a>
     <p class="castname"><a href="#">Aamir Khan</a></p>
    </li>
    <li class="card">
        <a href="#">
     <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
     </a>
     <p class="castname"><a href="#">Aamir Khan</a></p>
    </li>
         </ol>
 </section>
  </div>

score 0 · Answer 4 · answered Jun 24 '17 at 09:24

You set entire body of the html to max-width:400px so you cannot positioning child elements. If you want to align remove max-width property of body class

Remove

body {
max-width:400px;
}

To Change

 body {

}

And then set align to child elements

Try this

body {
  
}

.scroll {
  overflow: auto;
  white-space: nowrap;
  text-align:center;
  max-width:400px;
  margin:auto;
}
.card {
display:inline-block;
width:240px;
 list-style-type:none;
}

<section class="scroll">
      <ol>
       <li class="card">
        <a href="#">
     
     <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg" />
     
     </a>
     
     <p class="castname"><a href="#">Aamir Khan</a></p>
     
    </li>
  
    
    <li class="card">
        <a href="#">
     
     <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
     
     </a>
     
     <p class="castname"><a href="#">Aamir Khan</a></p>
     
    </li>
    
    <li class="card">
        <a href="#">
     
     <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
     
     </a>
     
     <p class="castname"><a href="#">Aamir Khan</a></p>
     
    </li>
    
    <li class="card">
        <a href="#">
     
     <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
     
     </a>
     
     <p class="castname"><a href="#">Aamir Khan</a></p>
     
    </li>
    
    <li class="card">
        <a href="#">
     
     <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
     
     </a>
     
     <p class="castname"><a href="#">Aamir Khan</a></p>
     
    </li>
  
 
         </ol>
 
 
 </section>
  
  
  </div>

Otherwise if you want to keep entire body max-width

Try this

body {
max-width:400px;
margin:auto;

}

.scroll {
  
  overflow: auto;
  white-space: nowrap;
  
}
.card {
display:inline-block;
width:240px;
 list-style-type:none;
}

<section class="scroll">
      <ol>
       <li class="card">
        <a href="#">
     
     <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg" />
     
     </a>
     
     <p class="castname"><a href="#">Aamir Khan</a></p>
     
    </li>
  
    
    <li class="card">
        <a href="#">
     
     <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
     
     </a>
     
     <p class="castname"><a href="#">Aamir Khan</a></p>
     
    </li>
    
    <li class="card">
        <a href="#">
     
     <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
     
     </a>
     
     <p class="castname"><a href="#">Aamir Khan</a></p>
     
    </li>
    
    <li class="card">
        <a href="#">
     
     <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
     
     </a>
     
     <p class="castname"><a href="#">Aamir Khan</a></p>
     
    </li>
    
    <li class="card">
        <a href="#">
     
     <img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
     
     </a>
     
     <p class="castname"><a href="#">Aamir Khan</a></p>
     
    </li>
  
 
         </ol>
 
 
 </section>
  
  
  </div>

How to center an display:inline-block section

4 Answers4