Question

我试图让它成为我在屏幕上居中的按钮（当屏幕是全尺寸时，它居中）保持在中心，同时仍然按比例缩小以适应较小的屏幕。

我已经尝试了一些我在这里和其他地方有关更改position: absolute;并将按钮包含在带有text-align: center;和margin: auto;的div中的地方的答案，但到目前为止按钮最终没有保持中心。

这就是我所拥有的：

    .wrapper {
    text-align: center;
    margin: auto;
  }

  #mybutton {
  position: absolute;
  left: 37%;
  text-align: center;
  cursor: pointer;
  bottom: 10%;
  letter-spacing: .55rem;
  max-width: 50%;
  background: #3498db;
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  text-shadow: 1px 1px 3px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 30px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  border-color: #3498db;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

这可能是我想念的非常简单，但是已经很晚了，我已经厌倦了搞乱这个，所以如果有人能提供任何帮助，我们将不胜感激！

Answer 1

＆＃13;

body {
  position: relative;
}

button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

＆＃13;

<body>
  <button>CLICK ME</button>
</body>

＆＃13;

see my pen for further explanation关于如何使用css

的transform属性

Answer 2

简单。您只需要text-align:center宽度。

CSS我用过

width:50%;margin:0 auto;text-align:center;

请参阅here

Answer 3

试试这个，它正在发挥作用。

.button1 {
  text-align: center;
}
.button1 a {
  background-color: #03326c;
  font-size: 25px;
  height: 35px;
  position: relative;
  text-align: center;
  display: inline-block;
  color: white;
  padding: .5em 1em;
}

<div class="button1">
  <a href="" title="title"><span class="Button1">BUTTON</span></a>
or you can put button also.
</div>

Answer 4

这就是我对你的问题的理解：你想制作一个按照屏幕尺寸缩放的按钮 AND 你想让它居中。

我已经完成了你一直在尝试做的事情并取得了this。

.wrapper{
    text-align: center;
}

button{
  width: 50%;
  ...
}

将文本对齐中心属性指定给按钮的父div，并为该按钮指定相对宽度。

如何将按钮保持在页面中心并响应？

4 个答案: