無法使用Bootstrap爲不同的屏幕大小定位HTML文本部分

我有一段文字，我想在每個屏幕上居中。但是，每當屏幕尺寸增大時，屏幕保持在頂部，屏幕底部保持空白並且看起來很糟糕。無法使用Bootstrap爲不同的屏幕大小定位HTML文本部分

我粘貼了代碼和屏幕截圖，如何保持最佳狀態而不是居中。

我也在代碼中標記了那部分，從頂部調整頁面的填充。不知道如何使它適合所有屏幕尺寸的中心。由於

body { 
 
    width: 100%; 
 
    height: 100%; 
 
    font-family: Lora,"Helvetica Neue",Helvetica,Arial,sans-serif; 
 
    color: #fff; 
 
    background-color: #000; 
 
} 
 

 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
h1, 
 
h2, 
 
h3, 
 
h4, 
 
h5, 
 
h6 { 
 
    margin: 0 0 35px; 
 
    text-transform: uppercase; 
 
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; 
 
    font-weight: 700; 
 
    letter-spacing: 1px; 
 
} 
 

 
p { 
 
    margin: 0 0 23px; 
 
    font-size: 18px; 
 
    line-height: 1.5; 
 
} 
 

 
@media(min-width:768px) { 
 
    p { 
 
     text-align: justify; 
 
     text-justify: inter-word; 
 
     margin: 0 0 20px; 
 
     font-size: 20px; 
 
     line-height: 1.6; 
 
    } 
 
} 
 

 
a { 
 
    color: #3bc692; 
 
    -webkit-transition: all .2s ease-in-out; 
 
    -moz-transition: all .2s ease-in-out; 
 
    transition: all .2s ease-in-out; 
 
    outline: 0!important; 
 
} 
 
@media(min-width:768px) { 
 
    .adjust-this { 
 
     padding-left: 55px; padding-right: 55px; 
 
    } 
 
} 
 

 
.content-section { 
 
    padding-top: 85px; 
 
} 
 

 
@media(min-width:767px) { 
 
    .content-section { 
 
     padding-top: 50px; /*This is where you can adjust padding for the section*/ 
 
     width: 100%; 
 
     height: 100%; 
 
    } 
 
} 
 

 
.content-section p { 
 
    opacity: 0.9; 
 
    font-family: 'Domine'; 
 
    font-size: 19px; 
 
    font-weight: 500; 
 
} 
 

 
a:hover, 
 
a:focus { 
 
    text-decoration: none; 
 
    color: #1d9b6c; 
 
} 
 

 
.greeting { 
 
    padding-top: 5px; 
 
    margin-bottom: 20px; 
 
}

<head> 
 

 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 

 
    <title>About</title> 
 

 
    <!-- Bootstrap Core CSS --> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
 

 
    <!-- Custom CSS --> 
 
    <link href="about.css" rel="stylesheet"> 
 

 
    <!-- Custom Fonts --> 
 
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
 
    <link href="http://fonts.googleapis.com/css?family=Open Sans:400,700,400italic,700italic" rel="stylesheet" type="text/css"> 
 

 
</head> 
 

 

 
<body> 
 
<!-- About Section --> 
 
    <article id="about" class="content-section"> 
 
     <div class="container"> 
 
      <div class="row"> 
 
       <div class="col-sm-10 col-sm-offset-1 text-left adjust-this"> 
 
        <h2 class="text-center greeting">Hi there!</h2> 
 
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 
 
        </p> 
 
        <p> 
 
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 

 
        </p> 
 
        <p> 
 
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.      
 
        </p> 
 

 
        <p> 
 
         It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. 
 
         </p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </article> 
 
    </body>

來源

2016-10-10 tsaebeht

你能約你的要求更加明確。此外這似乎是一個簡單的谷歌問題。 – Ale

我希望這個文本能夠在更大的屏幕中居中並且不會留在空底部的頂部 – tsaebeht

您可以在這裏查看幾種居中方法：https://css-tricks.com/centering-css-complete-guide/ – Alvaro

垂直居中一個div裏面是不是一件不與引導盒子。它遵循您爲頂部填充設置的規則。現在你正在設置padding-top: 85px;，這將不會在不同大小的屏幕上靈活。如果未指定容器高度，則無法使用vertical-align: middle;或彈性盒居中。但是如果你確實宣佈了一個高度，這將是很好的解決方案。

要繼續使用當前的方法，你可以只更新頂部填充你申請基於關閉屏幕尺寸：

@media(min-width: /*Specify screen size here*/) { 
    .content-section { 
     padding-top: 200px; /*add required top padding here*/ 
    } 
}

另一種更復雜的解決辦法是使用jQuery來計算窗口的高度，並添加頂邊距那是窗口高度的百分比。將以下代碼放在<body>標籤的頂部。

<script> 
$(document).ready(function() { 
    var getPadding = function() { 
     $("#about").css("padding-top",function() { 
      return (window.innerHeight*.15 + "px"); 
     }); 
    }; 
    getPadding(); 
    $(window).resize(function() { 
     getPadding(); 
    }); 
}); 
</script>

這裏是一個工作codepen鏈接：

http://codepen.io/egerrard/pen/BLxBBw

來源

2016-10-10 18:02:50

沒有得到放置此代碼的地方，因爲它沒有生效。你可以幫助我接受答案 – tsaebeht

你試圖使用哪種解決方案？你能聲明一個高度嗎？如果這樣做可能是最容易實現的。如果不添加各種視口的頂部填充將是第二個最簡單的，這只是添加到您的CSS。 –

你告訴第二部分... jquery一個 – tsaebeht

無法使用Bootstrap爲不同的屏幕大小定位HTML文本部分

回答

相關問題