7

对于我的一个项目，我第一次使用 Skeleton Boilerplate。而且我正在寻找将 div 置于 Skeleton 中心而不违反 Skeleton 规则的最佳实践。

目前，我的登录页面结构如下。

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 中的最佳实践吗？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

我知道这个问题被问到已经有一段时间了，但也许其他人可以使用这个答案。我能够通过用空格填充三分之一列类，然后用内容填充下一个三分之一列类，然后再用空格填充另一个三分之一列类来完成骨架居中。

<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

您可以将容器设置为

.container {
           position: absolute;
           top: 50%;
           left: 50%;
           margin-left: -43 //replace with half of the width of the container
           margin-top: -52 //replace with half of the height of the container
 }

将父容器或元素设置为位置：相对；

这是一篇关于如何使用 CSS 将任何内容居中的好文章

于 2013-08-06T10:11:43.963 回答
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 回答
1

我认为效果很好的一种方法是：

  <div class="container">
   <div class="row">
    <div class="two-half column">
     centered div content
    </div>
   </div>
  </div>

这使得 div 居中且响应迅速。您可以更改 margin-top 以使其一直位于中间，但是更改宽度（当然）将不再使其居中。

如果我错了，请纠正我，但这对我有用！:)

于 2016-08-02T10:12:35.023 回答