logo标签列表

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

htmlcss
3
我页面中有三个
元素。第一个是logo，第二个是内容，我将其垂直居中，最后一个是按钮，用户单击该按钮可以导航到另一个部分/页面。
我试图将按钮放在居中的
下方，但它却出现在logo下方。
我希望此页面能够在桌面和不同的移动设备上正确显示，因此我没有使用固定底边距。
请告诉我是否遗漏了什么。
    <!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>
        .center-div
        {
          position: absolute;
          top: 50%;
          left:50%;
          margin-right:-50%;
          transform: translate(-50%,-50%);
          width:100%;
          border: 3px solid red;
          background-color:peachpuff;
          text-align:center;
        }
    </style>      
</head>
<body>
    <div>
        <div>
                <h1>Logo</h1>
        </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 style="text-align:center;">
            <a target="_blank" href="" class="btn btn-primary" style="text-decoration:none;">Explore More »</a> 
        </div>
    <div>
</body>
</html>
4个回答
1

我不确定这是否是您想要的结果，但如果您将 position: absolute; 更改为 position: relative;，它们将被正确排序。

我希望内容div位于屏幕的垂直中心。如果更改位置值，则div不会保持在中心。 - Vrushali
1
您可以不用定位就实现这个效果。 使用display:table来设置容器，使用display: table-cell; vertical-align: middle来设置内容。 同时您需要将html/body和容器元素的高度设置为100%。 P.S. Display table和table-cell在IE7上无法工作。但是这个浏览器已经过时了。请放心使用。 这里有一篇很好的关于此问题的文章（请不要被标题所迷惑）。
以下是您需要的代码：
<!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>
0

您可以使用一些简单的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列来实现此行为。它们非常有助于调整不同视口的内容大小。
如果您使用Foundation，则可以使用以下内容：
<div class="row">
   <div class="small-2 large-4 columns myButton">

在这种情况下，该列将自动调整大小并占用小视口高达2个空间。同时对于中等和以上的设备（平板电脑、台式机），它将占用4个空间。

-1
只需从“.center-div”样式中删除“position”和“transform”属性！！然后删除“text-align”，并在按钮上添加一些“padding-left”..希望这会起作用 :)
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接