如何使显示居中：内联块部分

时间：2017-06-24 08:57:23

标签： html css

注意：不重复CSS center display inline block?

这是我的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>

我在外部div中尝试了display:block;margin:auto。 我试过了position:relative;left:50%;transform:translate(-50%)

我尝试了text-align:center;

但似乎没有任何效果。它甚至可能吗？

先谢谢你们：）

4 个答案:

答案 0 :(得分：0)

  

.card是chidrens scroll，他们有display:inline-block;所以更好的方法是使用text-align属性。就像这样：

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

Demo

答案 1 :(得分：0)

尝试，justify-content : center;或align-items: center;它会带来您的内容中心

如果您想带文字中心，请在text-align:center课程中使用.scroll 

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>

答案 2 :(得分：0)

您需要将以下代码添加到CSS中。

ol {
  padding-left: 0;
}

这将摆脱左侧的空间，该空间属于ol，而不属于任何li元素。

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>

答案 3 :(得分：0)

将html的整个主体设置为max-width：400px，这样就无法定位子元素。如果要对齐删除body类的max-width属性

删除 

body {
max-width:400px;
}

更改 

 body {

}

然后将对齐设置为子元素

试试这个

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>

否则，如果你想保持整个身体的最大宽度

试试这个

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>

相关问题
最新问题