html - 使用 CSS 居中 HTML 按钮

Question

我在页面上使用弹出式 TypeForm。我将按钮样式直接嵌入到 HTML 中以保留按钮类，但无法使按钮居中。

http://jsfiddle.net/Dan8arton/nmj042ed/

    <a class="typeform-share button" href="https://espresssopages.typeform.com/to/mRQUmM" data-mode="1" target="_blank">Launch me!</a>

<style>
    .typeform-share.button {
        background: #c0392b;
        color: #fff;
        font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 700;
        font-size: 11px;
        line-height: 15px;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-right: 15px;
        margin-bottom: 5px;
        border-radius: 5px;
        display: inline-block;
        text-align:center;
        padding: 14px 28px 13px 28px;
        border:2px solid;
        border-color: #c0392b;
    }
    .typeform-share.button:hover {
        background-image:none;
        background:#fff;
        color: #c0392b;
        border-color: #fff;
    }
</style>
<script>
    (function() {
        var qs, js, q, s, d = document,
            gi = d.getElementById,
            ce = d.createElement,
            gt = d.getElementsByTagName,
            id = 'typef_orm',
            b = 'https://s3-eu-west-1.amazonaws.com/share.typeform.com/';
        if (!gi.call(d, id)) {
            js = ce.call(d, 'script');
            js.id = id;
            js.src = b + 'share.js';
            q = gt.call(d, 'script')[0];
            q.parentNode.insertBefore(js, q)
        }
        id = id + '_';
        if (!gi.call(d, id)) {
            qs = ce.call(d, 'link');
            qs.rel = 'stylesheet';
            qs.id = id;
            qs.href = b + 'share-button.css';
            s = gt.call(d, 'head')[0];
            s.appendChild(qs, s)
        }
    })()
</script>
</div>
</div>
</div>

Answer 1

如何将按钮的 display 属性设置为 inline-block，然后为其父级提供一些文本对齐方式:

.btn-box{
    display: inline-block;
}
.col-md-12 {
    text-align: center;
}

这是您修改后的 fiddle ;

<div class="col-md-12">
    <div class="btn-box"> <a class="typeform-share button" href="https://espresssopages.typeform.com/to/mRQUmM" data-mode="1" target="_blank">Launch me!</a>

        <style>
            .btn-box{
                display: inline-block;
            }
            .col-md-12 {
                text-align: center;
            }
            .typeform-share.button {
                background: #c0392b;
                color: #fff;
                font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
                font-weight: 700;
                font-size: 11px;
                line-height: 15px;
                text-transform: uppercase;
                letter-spacing: 1px;
                margin-right: 15px;
                margin-bottom: 5px;
                border-radius: 5px;
                display: inline-block;
                padding: 14px 28px 13px 28px;
                border:2px solid;
                border-color: #c0392b;
            }
            .typeform-share.button:hover {
                background-image:none;
                background:#fff;
                color: #c0392b;
                border-color: #fff;
                .wrapper {
                    text-align: center;
                }
                .typeform-share.button {
                    position: absolute;
                    top: 50%;
                }
        </style>
        <script>
            (function() {
                var qs, js, q, s, d = document,
                    gi = d.getElementById,
                    ce = d.createElement,
                    gt = d.getElementsByTagName,
                    id = 'typef_orm',
                    b = 'https://s3-eu-west-1.amazonaws.com/share.typeform.com/';
                if (!gi.call(d, id)) {
                    js = ce.call(d, 'script');
                    js.id = id;
                    js.src = b + 'share.js';
                    q = gt.call(d, 'script')[0];
                    q.parentNode.insertBefore(js, q)
                }
                id = id + '_';
                if (!gi.call(d, id)) {
                    qs = ce.call(d, 'link');
                    qs.rel = 'stylesheet';
                    qs.id = id;
                    qs.href = b + 'share-button.css';
                    s = gt.call(d, 'head')[0];
                    s.appendChild(qs, s)
                }
            })()
        </script>
    </div>
</div>
</div>