html - 使按钮粘在 div 的底部并仍然居中-6ren

html - 使按钮粘在 div 的底部并仍然居中

转载作者：太空宇宙更新时间：2023-11-04 01:56:29

好吧，尝试使用 table-cell 和 vertical-align: bottom还尝试使用 position: relative on parent 和 position: absolute on button(这有点管用，我说有点是因为有些按钮开箱即用)。

这是 JsFiddle:https://jsfiddle.net/6abcr5f0/

HTML代码:

<!DOCTYPE html>

<link rel="stylesheet" href="styles/main.css">
<meta charset="utf-8">
<title>Apple - iPhone</title>

<ul id="ul">
    <a href="index.html"><img src="images/logo.png"></a>
    <li><a href="#">iPhone</a></li>
    <li><a href="#">iPad</a></li>
    <li><a href="#">iPod</a></li>
    <li><a href="#">Mac</a></li>
    <li><a href="#">Watch</a></li>
    <li><a href="#">TV</a></li>
    <li><a href="#">Support</a></li>
</ul>

<div id="ad">

    <center>
    <h3 class="blackh1">iPhone</h3>
    <h2 class="blackh1">This is 7.</h2>
    <img src="images/iphone.jpg" class="iphoneimg">
    </center>

</div>
<div id="product-container">
    <div class="cont"><div class="product">

        <h1 class="h1">iPhone</h1><br>
        <img src="images/iPhone7.png" class="contentimg">
        <p class="ptext">
        This is 7.
        iPhone 7 dramatically improves the most important aspects of the iPhone experience. It introduces advanced new camera systems. The best performance and battery life ever in an iPhone. Immersive stereo speakers. The brightest, most colorful iPhone display. Splash and water resistance.1 And it looks every bit as powerful as it is. This is iPhone 7.</p>
        <button class="buy">Buy from 649$</button>

    </div>

    <div class="product">

        <h1 class="h1">iPad</h1><br>
        <img src="images/IPad.png" class="contentimg2">
        <p class="ptext">iPad Pro is more than the next generation of iPad — it’s an uncompromising vision of personal computing for the modern world. It puts incredible power that leaps past most portable PCs at your fingertips. It makes even complex work as natural as touching, swiping, or writing with a pencil. And whether you choose the 12.9-inch model or the new 9.7-inch model, iPad Pro is more capable, versatile, and portable than anything that’s come before. In a word, super.</p>
        <button class="buy">Buy from 599$</button>

    </div>
    </div>
    <div class="cont"><div class="product">

        <h1 class="h1">iPod</h1><br>
        <img src="images/iPod.jpg" class="contentimg3">
        <p class="ptext">iPod touch is the perfect way to carry your music collection in your pocket. With the iTunes Store — the world’s largest music catalog — you can load up your iPod touch with your favorite songs. And thanks to iCloud, everything you purchase through the iTunes Store is automatically available on all your devices for free. To enhance your music experience even more, Apple Music is available on your iPod touch, right in the Music app.</p>
        <button class="buy">Buy from 399$</button>

    </div>

    <div class="product">


        <img src="images/watchlogo.png" class="watchlogo">
        <img src="images/watch.jpg" class="contentimg4">
        <p class="ptext">Built-in GPS. Water resistance to 50 meters.1 A new lightning-fast dual-core processor. And a display that’s two times brighter than before. Full of features that help you stay active, motivated, and connected, Apple Watch Series 2 is designed for all the ways you move.</p>
        <button class="buy">Buy from 269$</button>

    </div>
    </div>
</div>
<div id="product-container2">
    <h1 class="h1">iMac</h1>
    <h3>Retina. In colossal and ginormous.</h3>
    <img src="images/imac.png" class="imacimg">
    <p class="ptext">The idea behind iMac has never wavered: to craft the ultimate desktop experience. The best display, paired with high-performance processors, graphics, and storage — all within an incredibly thin, seamless enclosure. And that commitment continues with the all-new 21.5‑inch iMac with Retina 4K display. Like the revolutionary 27‑inch 5K model, it delivers such spectacular image quality that everything else around you seems to disappear. Adding up to the most immersive iMac experience yet — and another big, beautiful step forward.

    </p><br>
    <button class="button1">Check MacBook Pro</button>
    <button class="buy">Buy from 269$</button>
    <button class="button1">Check MacBook Air</button>
</div>
<div>
    <div class="footer">
        <p class="ftext">Copyright © 2017 Apple Inc. All rights reserved.</p>
        <ul id="footul">
            <li class="footli"><a href="index.html" class="flink">Privacy Policy</a></li>
            <li class="footli"><a href="index.html" class="flink">Terms of Use</a></li>
            <li class="footli"><a href="index.html" class="flink">Sales and Refunds</a></li>
            <li class="footli"><a href="index.html" class="flink">Legal</a></li>
            <li class="footli"><a href="index.html" class="flink">Site Map</a></li>
        </ul>
    </div>
</div>

最佳答案

您可以使用此 CSS 来完成。将 .buy 按钮绝对定位在底部，并使用 transform: translateX(-50%); left: 50% 水平居中。然后向父级添加一些 padding-bottom 以在底部为按钮创建空间。

.product {
  position: relative;
  padding-bottom: 50px;
}
.product .buy {
  position: absolute;
  margin: 0;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

html,body {
    background-color: #E9E9E9;
    padding:0;
    margin:0;
}

/* Nav bar */

#ul {
    list-style-type: none;
    background-color: rgba(10,10,10,0.85);
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: center;
}

#ul img {
    margin-top: 15px;
    margin-left: 10px;
    margin-right:30px;
    float: left;
    height: 23px;
}

#ul li a {
    font-family: 'Open Sans Condensed', sans-serif;
    display: block;
    color: white;
    text-align: center;
    padding: 18px 16px;
    text-decoration: none;
}

#ul li a:hover {
    color:#969696;
    text-decoration:none;
    transition:.5s;
}

/* Advertisement */

#ad {
    padding: 50px 20px;
    background-color: rgb(10,10,10);
    height: auto;
    
}

.blackh1 {
    font-family: 'Dosis', sans-serif;
    color: white;
}

/* Products */

#product-container {
    background-color: white;
    margin: 0px;
    padding: 0px;
    display:flex;
}

.cont {
    display:flex;
}

.product {
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 18px;
    margin-top: 30px;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 30px;
    background-color: white;
    border-style: solid;
    border-color: #0A97DD;
    border-radius: 20px;
    border-width: 1px;
    width: 50%;
    text-align: center;
}

.h1 {
    font-family: 'Dosis', sans-serif;
    color: #000;
    text-align: center;
}

.iphoneimg {
    width: 45%;
}

.contentimg {
    width: 65%;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
}

.contentimg2 {
    width: 58%;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
}

.contentimg3 {
    width: 87%;
    display: block;
    margin: 0 auto;
    margin-bottom: 21px;
}

.contentimg4 {
    width: 48%;
    display: block;
    margin: 0 auto;
    margin-bottom: 22px;
}

.buy {
    background-color: rgb(61,157,233);
    border-radius: 8px;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(0,119,214);
    background: -webkit-gradient(linear, 0% 35%, 0% 100%, from(#40A0EB), to(#0271CA));
    background: -webkit-linear-gradient(0% 35%, 0% 100%, from(#40A0EB), to(#0271CA));
    background: -moz-linear-gradient(center top, #40A0EB, #0271CA);
    margin-top: 15px;
    outline:0;
    color: #FCFCFC;
    margin-left: 35px;
    margin-right: 35px;
}

.buy:hover {
    border-color: rgb(20,130,208);
    background: -webkit-gradient(linear, 0% 35%, 0% 100%, from(#4FA7ED), to(#157CCE));
    background: -webkit-linear-gradient(0% 35%, 0% 100%, from(#4FA7ED), to(#157CCE));
    background: -moz-linear-gradient(center top, #4FA7ED, #157CCE);
    outline:0;
}

.buy:active {
    border-color: rgb(0,109,188);
    background: -webkit-gradient(linear, 0% 35%, 0% 100%, from(#3C93D8), to(#0269BA));
    background: -webkit-linear-gradient(0% 35%, 0% 100%, from(#3C93D8), to(#0269BA));
    background: -moz-linear-gradient(center top, #3C93D8, #0269BA);
    outline:0;
}

.watchlogo {
    margin-top: 22px;
    margin-bottom: 15px;
}

#product-container2 {
    background-color: #E9E9E9;
    padding-top: 13px;
    padding-bottom: 40px;
    padding-left: 250px;
    padding-right: 250px;
    text-align:center;
}

.imacimg {
    width: 50%;
    display: block;
    margin: 0 auto;
    margin-top:40px;
    margin-bottom: 40px;
    
}

.button1 {
    outline: 0;
    border-radius: 8px;
    margin-left: 50px;
    margin-right: 50px;
    background-color: white;
    border-style: none;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 5px;
}

.button1:hover {
    background-color: #F5F5F5;
}
.button1:active {
    background-color: #F0F0F0;
}

/* Footer */

.footer {
    margin: 0px 200px;
    border-top-style: solid;
    border-width: 1px;
    border-color: #CECECE;
    padding-top: 15px;
    text-align: center;
}

.ftext {
    font-size: 11px;
    color: #989898;
}

.flink {
    font-size: 11px;
    color: #989898;
}

#footul {
    list-style-type: none;
    display: flex;
    justify-content: center;
}

.footli {
    margin-left: 15px;
    margin-right: 15px;
}

/* For tablets/phones screens */

@media (max-width: 668px) {
    
    .iphoneimg {
        width: 100%;
    }
    
    .contentimg{
        width:100%;
        margin-bottom: 20px;
    }
    
    .contentimg2 {
        width: 89%;
        margin-bottom: 23px;
    }
    
    .contentimg3 {
        width: 100%;
        margin-bottom: 20px;
    }
    
    .contentimg4 {
        width: 55%;
        margin-bottom: 20px;
    }
    
    .ptext {
        font-size: 11px;
    }
    
    .imacimg {
        width: 65%;
    }
    
    #product-container2 {
        padding-left: 20px;
        padding-right: 20px;
    }
    .button1 {
        display: block;
    }
    
    .footer {
            margin: 0px 15px;
    }
    
    #ftext {
        font-size: 9px;
    }
}

/* For medium or less big screens */

@media (max-width: 1070px) {
    
    #product-container {
        display: block;
    }
    
    .product {
        width: 50%;
    }
    
}
    
    .product {
      position: relative;
      padding-bottom: 50px;
    }
    .product .buy {
      position: absolute;
      margin: 0;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
    }

<!DOCTYPE html>

<html lang="es">

<head>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="styles/main.css">
    <meta charset="utf-8">
    <title>Apple - iPhone</title>
    
</head>
    
<body>
    

    
    <ul id="ul">
        <a href="index.html"><img src="images/logo.png"></a>
        <li><a href="#">iPhone</a></li>
        <li><a href="#">iPad</a></li>
        <li><a href="#">iPod</a></li>
        <li><a href="#">Mac</a></li>
        <li><a href="#">Watch</a></li>
        <li><a href="#">TV</a></li>
        <li><a href="#">Support</a></li>
    </ul>
    
    <div id="ad">
        
        <center>
        <h3 class="blackh1">iPhone</h3>
        <h2 class="blackh1">This is 7.</h2>
        <img src="images/iphone.jpg" class="iphoneimg">
        </center>
    
    </div>
    <div id="product-container">
        <div class="cont"><div class="product">
    
            <h1 class="h1">iPhone</h1><br>
            <img src="images/iPhone7.png" class="contentimg">
            <p class="ptext">
            This is 7.
            iPhone 7 dramatically improves the most important aspects of the iPhone experience. It introduces advanced new camera systems. The best performance and battery life ever in an iPhone. Immersive stereo speakers. The brightest, most colorful iPhone display. Splash and water resistance.1 And it looks every bit as powerful as it is. This is iPhone 7.</p>
            <button class="buy">Buy from 649$</button>
    
        </div>
        
        <div class="product">
            
            <h1 class="h1">iPad</h1><br>
            <img src="images/IPad.png" class="contentimg2">
            <p class="ptext">iPad Pro is more than the next generation of iPad — it’s an uncompromising vision of personal computing for the modern world. It puts incredible power that leaps past most portable PCs at your fingertips. It makes even complex work as natural as touching, swiping, or writing with a pencil. And whether you choose the 12.9-inch model or the new 9.7-inch model, iPad Pro is more capable, versatile, and portable than anything that’s come before. In a word, super.</p>
            <button class="buy">Buy from 599$</button>
    
        </div>
        </div>
        <div class="cont"><div class="product">
        
            <h1 class="h1">iPod</h1><br>
            <img src="images/iPod.jpg" class="contentimg3">
            <p class="ptext">iPod touch is the perfect way to carry your music collection in your pocket. With the iTunes Store — the world’s largest music catalog — you can load up your iPod touch with your favorite songs. And thanks to iCloud, everything you purchase through the iTunes Store is automatically available on all your devices for free. To enhance your music experience even more, Apple Music is available on your iPod touch, right in the Music app.</p>
            <button class="buy">Buy from 399$</button>
        
        </div>
        
        <div class="product">
        
            
            <img src="images/watchlogo.png" class="watchlogo">
            <img src="images/watch.jpg" class="contentimg4">
            <p class="ptext">Built-in GPS. Water resistance to 50 meters.1 A new lightning-fast dual-core processor. And a display that’s two times brighter than before. Full of features that help you stay active, motivated, and connected, Apple Watch Series 2 is designed for all the ways you move.</p>
            <button class="buy">Buy from 269$</button>
        
        </div>
        </div>
    </div>
    <div id="product-container2">
        <h1 class="h1">iMac</h1>
        <h3>Retina. In colossal and ginormous.</h3>
        <img src="images/imac.png" class="imacimg">
        <p class="ptext">The idea behind iMac has never wavered: to craft the ultimate desktop experience. The best display, paired with high-performance processors, graphics, and storage — all within an incredibly thin, seamless enclosure. And that commitment continues with the all-new 21.5‑inch iMac with Retina 4K display. Like the revolutionary 27‑inch 5K model, it delivers such spectacular image quality that everything else around you seems to disappear. Adding up to the most immersive iMac experience yet — and another big, beautiful step forward.

        </p><br>
        <button class="button1">Check MacBook Pro</button>
        <button class="buy">Buy from 269$</button>
        <button class="button1">Check MacBook Air</button>
    </div>
    <div>
        <div class="footer">
            <p class="ftext">Copyright © 2017 Apple Inc. All rights reserved.</p>
            <ul id="footul">
                <li class="footli"><a href="index.html" class="flink">Privacy Policy</a></li>
                <li class="footli"><a href="index.html" class="flink">Terms of Use</a></li>
                <li class="footli"><a href="index.html" class="flink">Sales and Refunds</a></li>
                <li class="footli"><a href="index.html" class="flink">Legal</a></li>
                <li class="footli"><a href="index.html" class="flink">Site Map</a></li>
            </ul>
        </div>
    </div>

    
</body>
    
</html>

关于html - 使按钮粘在 div 的底部并仍然居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42519654/

文章推荐： node.js - Dialogflow的Fullfilment逻辑无法获取Google帐户信息

文章推荐： node.js - 获得喜欢的帖子的 id - Node.js Express Socket.io

文章推荐： node.js - 如何防止 Jenkins Pipeline 完成后关闭 NodeJS 服务？

文章推荐： javascript - google-oauth 登录后 node.js/express/passport 挂起

java - 在解决构建路径错误之前无法构建项目(仍然)
每次我尝试构建(执行完整的 Clean，然后构建)时，我都会在 Eclipse 的问题部分下弹出此错误消息。项目本身旁边还显示一个错误。我已经尝试了同一问题的其他解决方案中包含的所有内容: 删除项目
java - 没有找到合适的驱动程序..仍然
我收到以下错误(注意:我使用的是 Netbeans): java.sql.SQLException: No suitable driver found for jdbc:derby://localho
c++ - 在构造函数中使用指向(仍然)未初始化成员的指针是否安全？
例如 //somewhere struct IFace; struct Base { Base(IFace* iface): f(iface) { //wi
c++ - sstream 不工作...(仍然)
我试图通过 stringstream 将 double 变成字符串，但它不起作用。 std::string MatlabPlotter::getTimeVector( unsigned int xve
ios - AudioKit(仍然)缺少用于对音频文件进行排序的时钟
我正在尝试使用 AudioKit 框架中的音序器播放音频文件。 AudioKit.output = sampler AudioKit.start() sampler.enableMID
ruby-on-rails - Heroku 部署问题.. 仍然
昨天我问了一个关于插入 Heroku 的问题。它不工作，然后突然开始工作。我什么都没改变。现在在一个新的应用程序上，我遇到了完全相同的问题。我决定包含我的整个 Gemfile，希望我可以继续没有这种令
c# - TabControl WPF MVVM中的延迟加载(仍然)
我知道，这个topic已经是discussed许多times，所以直截了当。这是ItemsSource的TabControl: Tabs = new ObservableCollection {
javascript - AngularJS 更新功能(仍然)不起作用
我有一个更新对象的函数，问题是当我从更新表单字段返回到详细 View 时，它初始化旧对象而不是更新后的对象。我想在 CarService 而不是 app.js 中填充汽车列表这是我的汽车服务:
delphi - Delphi TClientSocket(仍然)是否已弃用？
在 resolution comments错误报告 12266 (“套接字连接错误导致资源泄漏”)，Robert Ehteshamzadeh 写道 TClientSocket is deprecate
Java:JTextField(仍然)在最小化时调整大小(新信息)
我最初发布了一个问题 here 我发现 JTextField 仅在 JScrollPane 存在时才调整大小。换句话说，我可以根据需要最小化和最大化它，直到出现滚动条(因为文本太多，无法放入窗口)。之
css - Firefox(仍然)不打印绝对定位的 div？
我读过关于 postion:absolute 的问题并尝试了几乎所有可能的解决方案。包括相对定位 div，将它们包装在相对定位的父级中等等，但它没有帮助。我正在绘制一个表格，然后我将 div 放入其
javascript - document.getElementById(仍然)不工作
我在这里发起了一个话题document.getElementById not working但看起来即使提出的建议都是有效的，我仍然有问题。我有几个复选框。当我在这里查看页面源代码时，有。 docu
javascript - 对于奇数测试，按位 AND 运算符总是比模数快(仍然)吗？
我正在做一些阅读，试图更好地理解按位运算符，然后偶然发现了 a helpful old blog post from 2012 ，其中指出 - 在随机正整数 x 的奇数测试中 - 在作者的计算机上评估
java - AspectJ 与 Maven(仍然)无法工作
我正在尝试在 Eclipse Neon 中使用 aspectj 创建一个示例 maven 项目。然而，方面并没有编织/工作(参见下面的输出)。我尝试寻找很多原因和解决方案，但没有一个有效(请参阅下面的
c# - .Net Core 2.0 调试日志记录被破坏(仍然)
无论我如何配置我的 appsettings.json 和 appsettings.Development.json，除非我手动添加 ConfigureLogging，否则我无法在信息消息下方记录任何内
javascript - (仍然)对 javascript 闭包、ajax 和返回值更加困惑
我正在尝试使用 JQuery .get() 方法和 JavaScript for 循环来处理来自外部文件的一些数据。我已经在 stackoverflow 上阅读了有关闭包和回调返回值的内容几个小时，但
php - 无法在 PHP 5.6 中打印文件(仍然)？
我正在使用 PHP 5.6 并且要打印一些东西，我必须编辑 php.ini 并包含 php_printer.dll 文件。但是 PHP 5.6 没有.dll 文件。我要解决的问题: 我想将凭证打印机
取消 Hook 后 C# 仍然 Hook 到事件
我目前正在调试一个包含内存泄漏的大(非常大!)C# 应用程序。它主要使用 Winforms 作为 GUI，尽管一些控件是在 WPF 中制作的，并由 ElementHost 托管。直到现在，我发现许多内
mysql - 将 wait_timout 设置为 30 ，仍然 sleep 连接以恒定速率增加
[已解决] 看来 PHP MYADMIN 变量成功了。我将 wait_timeout 设置为 30 ，并将 Lock_wait_timeout 设置为 50 花了将近 6 个小时才恢复稳定，包括几次重
c++ - CONFIG += c++11(仍然)在 Linux 上不起作用
我读过几个关于该主题的讨论，有人说 qmake < 3.0 不正确支持该指令。我刚刚为 g++-64 重新安装了 Qt 5.9.1，但问题仍然存在。此外，我尝试过各种 mkspecs/xxx/xxx.

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 使按钮粘在 div 的底部并仍然居中