Question

原谅我问这个愚蠢的问题，因为我是HTML的新手。

我试图在页面中心放置一些基于图像的内容。所以，当我们写的时候，

<div class="row">	
	<div class="col-sm-6">
		<div id="myCarousel" class="carousel slide" data-ride="carousel">
			  <div class="carousel-inner">
				 <div class="item active">
						
				</div>
		</div>
 </div>
</div>

内容保持左对齐（即从第1列到第6列）。如何准确地将其带到中心？我们是否需要在左右两边都留三列才能到达中心，如果是的话，该如何处理？

Answer 1

您可以使用CSS使内容居中。您可以阅读有关CSS here的更多信息，并可以通过这种方式使文本居中。

 <style>
 .col-sm-6 {
    text-align: center;
     } 
</style>

还可以找到其他CSS样式here的方法。

Answer 2

如果将元素设置为像素宽度（例如width：100px），则还可以添加margin：auto，以使其在其父元素内居中对齐

Answer 3

尝试使用bootstrap来制作grid view of your page

  .row div {
  border: 1px solid #ddd;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-4"></div>
    <div class="col-xs-4 text-center"><img src="http://publish.illinois.edu/engineeringcareerservices-new/files/2014/08/UI-02-140808-014.jpg" width="100" height="100"></div>
    <div class="col-xs-4"></div>
  </div>

</div>

居中对齐页面内容

3 个答案: