Question

我的页面中有3个div。第一个是徽标，第二个是我垂直居中的内容，最后一个是按钮，然后它将使用户导航到另一个部分/页面。

我正在尝试将按钮置于居中div下方，但不知何故它显示在徽标下方。

我希望此页面可以在台式机和其他手机上正确显示，因此我没有使用固定的下边距。

请让我知道我是否缺少任何东西。

    // Make the typed array
    const clients : Array<Client> = [];
    for ( let i = 0; i < 10; i++ ) {
      clients.push ( new Client ( i, 'client_' + i.toString () ) );
    }

    // This is the magic line, just spread the object
    const plain = clients.map ( x => ( { ...x } ) );

    // First logs as a typed array, 
    // second as just plain old objects
    console.log ( clients );
    console.log ( plain );

Answer 1

我不确定这是否是您想要的结果，但是如果将this.is.king.apply(this)更改为position: absolute;，则会以正确的顺序放置它们。

Answer 2

无需定位即可实现此目的。将display:table用于容器，将display: table-cell; vertical-align: middle用于内容。另外，您必须将html / body和container元素的高度设置为100％。附言显示表和表单元格不适用于IE7。但是这个浏览器是一个历史。自由使用。 Here is good article about this（不要被标题欺骗）。

这是您需要的代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <style>
        html,body {height: 100%;}

        .container{
            display: table;
            height: 100%;
        }

        .content-wrapper{
            display: table-cell;
            vertical-align: middle;
        }

        .link{
            text-align: center;
        }
    </style>      
</head>
<body>
    <header>
            <h1>Logo</h1>
    </header>
    <div class="container">
        <div class="content-wrapper">
            <div>
                <h2>Title of paragraph</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p>
            </div>
            <div class="link">
                <a target="_blank" href="" class="btn btn-primary" style="text-decoration:none;">Explore More »</a> 
            </div>
        </div>
    </div> 
</body>
</html>

Answer 3

您可以使用一些简单的CSS来实现所需的配置。

我在这里给你做了一个例子：

 .center-div {
   border: 3px solid red;
   background-color: peachpuff;
   text-align: center;
   margin: 10px;
 }

 .logo {
   text-align: center;
 }

 .myButton {
   text-align: center;
 }

  <div>
    <div class="logo">
      <h1>Logo</h1>
    </div>
  </div>
  <div>
    <div class="center-div">
      <h1>Title of paragraph</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
        vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum.
        Sed dapibus pulvinar nibh tempor porta.</p>
    </div>
  </div>
  <div>
    <div class="myButton">
      <a target="_blank" href="" class="btn btn-primary" style="text-decoration:none;">Explore More »</a>
    </div>
  </div>

在您的帖子中，您提到“我希望此页面可以在台式机和其他手机上正确显示，因此我没有使用固定的底部边距。”

您可以通过使用Bootstrap列或Foundation列来具有此行为。它们对于调整不同视口的内容大小很有帮助。

如果您使用粉底，则可能会出现以下情况：

<div class="row">
   <div class="small-2 large-4 columns myButton">

在这种情况下，该列将在小视口中自动调整大小，最多占用2个空间。同时，对于中型及以上（平板电脑，台式机），则需要4。

Answer 4

只需从“ .center-div”样式中删除“ position”和“ transform”属性即可！！然后删除“文本对齐”并在按钮上添加一些“向左填充”。我希望它能起作用：）

想要将按钮放在垂直居中的DIV下方

4 个答案: