7

私のプロジェクトでは、初めて Skeleton Boilerplate を使用しています。そして、スケルトンのルールにぶつかることなく、スケルトンの div を中央に配置するベスト プラクティスを探しています。

現在、ログインページの構造は次のとおりです。

HTML:

<div class="container">
<div class="sixteen columns vertical-offset-by-one">
<div id="loginBox">
<img src="images/yeditepeLogo.png" alt="Yeditepe Logo" class="yeditepeLogo" />
<form action="" id="loginForm">
<input type="text" name="username" required placeholder="username" class="loginTextField">
<input type="password" name="password" required placeholder="password" class="loginTextField">
<input type="submit" value="Log In" class="loginButton" />
</form>
</div><!-- loginBox -->

</div><!-- sixteen columns -->

<div class="sixteen columns">
<p align="center"><a href="registration.html" target="_blank">Click here to register</a></p>
</div>
</div><!-- container -->

CSS:

#loginBox, #registrationBox {
  width: 470px;
  height: 450px;
  background-color: white;
  left: 245px; */
  top: 20px; */
  position: relative; 
  margin: 0px auto;  }

#registrationBox {
  height: 500px; }

.yeditepeLogo {
  position: relative;
  left: 40px;
  top: 33px; }

#loginForm, #registrationForm {
  position: relative;
  top: 45px; }

.loginTextField, .registrationTextField {
  position: relative;
  height: 40px;
  width: 388px;
  left: 40px;
  border-color: #dedede;
  border-style: solid;
  border-width: 1px;
  margin-bottom: 10px;
  text-align: left;
  font-size: 18px;
  text-indent: 10px;
  -webkit-appearance: none; }

.loginTextField:focus, .registrationTextField:focus {
  outline-color: #ff9800;
  outline-style: solid;
  outline-width: 1px;
  border-color: white; }

.loginTextField:nth-child(2), .registrationTextField:nth-child(3) {
  margin-bottom: 40px; }

.loginButton, .registrationButton {
  background-color: #77a942;
  position: relative;
  border: none;
  width: 390px;
  height: 60px;
  left: 40px;
  color: white;
  font-size: 24px;
  text-align: center;
  opacity: 0.8; }
  .loginButton:hover, .registrationButton:hover {
    opacity: 1; }

ご覧のとおり、#loginBox の幅と高さは固定されており、常にページの中央に配置する必要があります。margin: 0px 自動コードは、水平方向のセンタリングを提供します。しかし、それは Skeleton でのベスト プラクティスでしょうか? スケルトンはより良い方法を提供しますか?

また、垂直方向のセンタリングを提供するにはどうすればよいですか?

4

5 に答える 5

19

実際、Skeleton には div を中央に配置する方法が組み込まれています。

<div class="sixteen columns">
    <div class="four columns offset-by-six">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</div>

この場合の 6 によるオフセットは、1 から 15 まで変更でき、入力された列数だけ現在の列をオフセットします。優れた機能として、小さい画面を使用する場合、オフセットは位置合わせに影響しません。

明確にするために：これはdivの実際のコンテンツを中央に配置するのではなく、div自体を中央に配置します。

于 2014-06-13T13:11:41.603 に答える
6

この質問が出されてからしばらく経っていることは知っていますが、他の誰かが答えを使用できるかもしれません。3 分の 1 の列クラスにスペースを入れ、次の 3 分の 1 の列クラスにコンテンツを入れ、別の 3 分の 1 の列クラスに再びスペースを入れることで、Skeleton をセンタリングすることができました。

<div class="one-third column">&nbsp;</div>
<div class="one-third column"><p>Center of the screen.</p></div>
<div class="one-third column">&nbsp;</div>
于 2014-03-30T18:38:39.277 に答える
1

Asus3000の答えは私がしていることであり、うまく機能するので良いです。私はそれをモバイルにのみ追加します。これにより、不要な垂直方向のスペースがかなり追加されます。モバイルの縦方向のスペースを避けるために、クラス .filler を使用してモバイルで非表示にします。

HTML

<div class="one-third column filler">&nbsp;</div>
<div class="one-third column"><p>Center of the screen.</p></div>
<div class="one-third column filler">&nbsp;</div>

CSS

/* or whatever mobile viewport */
@media only screen and (max-width: 960px) {
  .filler { display: none}
}
于 2015-09-23T19:44:48.753 に答える