Question

有谁知道如何将这两个按钮居中，这样无论用户屏幕的大小如何，它们都会保留在页面的中下部？

<a class="my-button" title="Relevant Title" href="#">Back</a><a class="my-
 button" title="Relevant Title" href="#">Next</a>

.my-button {
    display: inline-block;
    margin: 5px;
    background: #32CE87;
    color: white;
    font-size: 1.5em;
    font-family: 'Raleway', sans-serif;
    text-align: center;
    border-radius: 5px;
    padding: 8px 16px;
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    left:30rem;
    right:10rem;
    position: relative;
    top:-4rem;
    width: 100px;
    text-decoration: none;
}
.my-button:hover {
    background: #666;
    color: #c1e1e0;
}

Answer 1

你走了：

https://jsfiddle.net/nghpf7e7/

需要将其包装在div中并应用样式：

.center-bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
}

Answer 2

试试这个，

<div class="myContainer my-button">
 <a class="my-button" title="Relevant Title" href="#">Back</a>
 <a class="my-button" title="Relevant Title" href="#">Next</a>
</div>

css：

.myContainer {
    display: block;
    height: 100%;
    width: 100%;
}

.my-button{
   display: inline-block;
    text-align: center;
}
.my-button::before{
  content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 0px;
}

body {
    height: 100%;
    margin: 0;
    width: 100%;
}
html {
    height: 100%;
    width: 100%;
}

响应A标签

2 个答案: