垂直和水平位置与引导3

全屏我在这个世界上初学者，有一些技巧我还需要学习，我打这个设计，我已经粉碎了最的就是对齐。我正试图使这种方式在全屏风格中垂直和水平对齐。我尝试了一些不同的东西，但总是在某些方面突破。垂直和水平位置与引导3

我正在使用最新的Bootstrap。

的基础是以下之一： http://i.stack.imgur.com/RUL9K.png

感谢您的时间。

来源

2015-02-11 Seven Studio

[如何水平和垂直居中元素？]（http://stackoverflow.com/questions/19461521/如何中心一个元素水平和垂直） – 2015-02-11 04:08:00

在这里给你一些代码，你已经尝试或创建小提琴。 – ketan 2015-02-11 04:08:03

把代码你试过..通常你可以通过'

.....

'控制水平对齐，这将占用大屏幕的4/12空间和小屏幕的全空间（12/12） – suhailvs 2015-02-11 04:19:20

你可以通过创建一个div class="row"控制水平对齐，然后把需要用类空间的div col-md-*

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="row"> 
 
    <div class="col-md-8">col-md-8.. This will occupy 8/12th space. but will occupy full width in small screens.</div> 
 
    <div class="col-md-4">You can also add more colomuns. this one is 4/12th space.</div> 
 
</div> 
 
<hr> 
 
<div class="row"> 
 

 
    <div class="col-md-4 col-md-offset-3">if you add some offset to beginning you can use .col-md-offset-*. here there will be 3/12th space offset. again in small screen it will be full width</div> 
 
</div>

来源

2015-02-11 04:28:49 suhailvs

您可以通过下面这段代码试试：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Centering</title> 
    <!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="http://code.jquery.com/jquery-1.11.0.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
<script> 
    jQuery(document).ready(function(){ 
     window_height=jQuery(window).height(); 
     my_div_height=jQuery(".col-centered").height(); 
     center_value=(window_height-my_div_height)/2; 

     jQuery(".col-centered").css('margin-top',center_value); 
    }); 

    // script for responsive; 
    jQuery(window).resize(function(){ 
     window_height=jQuery(window).height(); 
     my_div_height=jQuery(".col-centered").height(); 
     center_value=(window_height-my_div_height)/2; 

     jQuery(".col-centered").css('margin-top',center_value); 
    }); 
</script> 

<style type="text/css"> 
    .col-centered { 
     margin:auto; 
     float: none; 
     text-align:center; 
    } 
</style> 
</head> 

<body> 

    <section class="custom_name"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-lg-10 col-centered"> 
        fsadfljsd 
       </div> 
      </div> 
     </div> 
    </section> 

</body> 
</html>

来源

2015-02-11 06:18:35

垂直和水平位置与引导3

回答

相关问题