如何以响应速度将HTML体内的所有元素集中在HTML体内

Question

输入图像描述此处将HTML主体中的所有元素中心中心响应。我希望使用Bootstrap框架在Image.am中显示的身体中心中的所有三个元素。

	<div class="container-fluid">
		<div class="col-md-4">
			<img src="img/quote.png" class="img-responsive wow animated zoomIn">
	
		</div>
	
		<div class="col-md-6  text-center main-img">
			<img src="img/main.jpg" class="homeimg img-responsive wow animated zoomIn">
			
		</div>
		
		<div class="col-md-2">
			<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal"  data-backdrop="static" data-keyboard="false">Go to Website</button>
		</div>
			  
			</div>
			
		

在此处输入图像描述

Answer 1

有一个查看-https：//plnkr.co/edit/abopqjxww2zvgimiy53o?p=pteptepteptepreview

由于您使用的是bootstrap col，因此添加偏移col-md-offset-4将有助于完成这项工作。

Answer 2

您可以进行DIV类行以将网格对齐到页面的中心

	<div class="container-fluid">
     <div class="row">
		<div class="col-md-4">
			<img src="img/quote.png" class="img-responsive wow animated  zoomIn">
	
		</div>
	
		<div class="col-md-6  text-center main-img">
			<img src="img/main.jpg" class="homeimg img-responsive wow animated zoomIn">
			
		</div>
		
		<div class="col-md-2">
			<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal"  data-backdrop="static" data-keyboard="false">Go to Website</button>
		</div>
			  
			</div>
			
</div>    
	

Answer 3

您可以这样尝试：

 <div class="container-fluid">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <img src="img/quote.png" class="img-responsive wow animated zoomIn">
            </div>
            <div class="col-md-6  text-center main-img">
                <img src="img/main.jpg" class="homeimg img-responsive wow animated zoomIn">
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Go to Website</button>
            </div>
        </div>
    </div>
</div>