响应式 A 标签答案

【问题标题】：Responsive A tags响应式 A 标签
【发布时间】：2018-01-03 00:42:21
【问题描述】：

有谁知道我怎样才能使这两个按钮居中，以便无论用户屏幕的大小如何，它们都保持在页面的中心底部？

<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;
}

【问题讨论】：

text-align: center 在这两个锚标记的包含元素上将足以水平居中，不需要right 和left 属性值 - 除非您尝试对齐绝对定位元素。考虑编辑您的问题以添加更多上下文并使您的意图更加清晰。
感谢 UncaughTypeError，我现在已经成功排序了 :)

标签： html css button text

【解决方案1】：

给你：

https://jsfiddle.net/nghpf7e7/

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

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

【讨论】：

【解决方案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%;
}

【讨论】：