如何在div中插入两个内联按钮(css)?

这个问题在这里已经有了答案:

  • 如何在另一个<div>中水平居中<div>? 82个答案

  • 我对班级名称进行了一些更改(删除了空格)并放置了一些边界,以便您更好地理解div的放置。 代码如下:

    <html>
    <head>
    <style>
    .jumbotron-hub-jumbo {
    margin: 0 auto;
    border:2px solid black;
    width:300px;
    }
    
    .hub-btns {
        margin: 0 auto;
    	width:200px;
    	border:2px solid green;
    }
    
    .hub-btns .copy-link {
        border-bottom-color: #EBEBEB;
    }
    
    .hub-btns .create-drop:hover {
        background-color: #03a9f4;
    }
    
    .hub-btns .create-drop:focus {
        background-color: #03a9f4;
        border-bottom-color: #0398db;
    }
    
    .hub-btns a {
    	width:200px;
    	border: 2px solid red;
        margin: 0 10px;
    }
    </style>
    </head>
    <body>
       <div class="jumbotron-hub-jumbo">
            <div class="hub-header">
                <div class="container">
                    <h2 class="txt-white">Jason's Summer Vacation</h2>
                    <p class="txt-white">There doesn't seem to be a description here!</p>
                </div>
            </div>
            <div class="hub-btns">
                <a class="copy-link btn btn-lg btn-wide bg-white" href="" role="button">Copy Link</a>
                <a class="create-drop btn btn-primary btn-lg btn-wide txt-white bg-blue border-blue ripple" href="" role="button">Create Drop</a>
            </div>
        </div>
    	</body>
    </html>

    没有看到你想要做的事情,帮助有点棘手。 添加text-align: center;.hub-btns应该足以将这些按钮居中对齐。

    另外,我可能会移动margin: 0 10px;.hub-btns而不是直接应用锚点/按钮。

    最后,如果您不需要支持旧浏览器,请尝试投入一些时间来学习flexbox的基础知识。 它让我们的生活在“对齐事物”方面变得更加轻松。

    链接地址: http://www.djcxy.com/p/13221.html

    上一篇: How to center div with two inline buttons in it (css)?

    下一篇: How to center <input> horizontally in a <div>?