如何使html体中的所有元素居中以响应

Question

enter image description here如何将所有元素集中在html体中的中心与responsive.i想要在图像中显示的身体中心的所有三个元素。使用自举框架。

	<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>
			
		

enter image description here

Answer 1

看看这个 - https://plnkr.co/edit/ABOpqjxWw2ZvGiMiy53O?p=preview

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

Answer 2

您可以使用div类行将网格与页面中心对齐

＆＃13;

＆＃13;

	<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>    

	

＆＃13;

＆＃13;

＆＃13;

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>