如何在响应式 css 按钮中对齐文本中心？

Question

我有一张图片，里面有两个按钮。我希望这些按钮能够响应并且文本始终居中并在图像调整大小时调整大小。这些按钮内的文本没有居中，在调整浏览器大小时或在移动设备上浏览时会变得更糟。我错过了什么？下面是图像和按钮的 CSS 代码：

.container {
  position: relative;
  width: 100%;
  max-width: 2400px;
}

.container img {
  width: 150%;
  opacity: 0.85;
  height: auto;
}

.container .btn {
  width: 30%;
  height: 10%;
  opacity: 0.8;
  filter: alpha(opacity=80);
  position: absolute;
  top: 80%;
  left: 70%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 1.5vw;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  line-height: 100%;
}

.container .btns {
  width: 30%;
  height: 10%;
  opacity: 0.8;
  filter: alpha(opacity=80);
  position: absolute;
  top: 80%;
  left: 30%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 2vw;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  line-height: 100%;
}

<div class="container">
  <img img="" src="" alt="">
  <a href="" class="btn">Registracija Kaune</a>
  <a href="" class="btns">Registracija Vilniuje</a>
</div>

下面是外观图片：

这是它在桌面上的样子：

这是它在 mobile/resized 浏览器上的样子：

Answer 1

我修改了你的代码。试试这个

 .container {
   position: relative;
   width: 100%;
   height:100vh;
 }

 .btn-container{
   display:flex;
   justify-content: center;
   align-items: center;
   height:100%;
   width:100%;
 }

 .container img {
   width: 150%;
   opacity: 0.85;
   height: auto;
  }

 .container .btn {
    opacity: 0.8;
    filter: alpha(opacity=80);
    background-color: #555;
    color: white;
    font-size: 1.5em;
    padding: 12px 24px;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    line-height: 100%;
    margin: 0 30px;
 }

我添加了一个 div 类名为 btn-container 的类名，用于放置您的按钮并位于中心

<div class="container">
  <img img="" src="" alt="">
  <div class="btn-container">
    <a href="" class="btn">Registracija Kaune</a>
    <a href="" class="btn">Registracija Vilniuje</a>
  </div>
</div>

Answer 2

尝试删除高度：10%；来自 .container .btn 因为你为此添加了填充

.container {
  position: relative;
  width: 100%;
  max-width: 2400px;
}

.container img {
  width: 150%;
  opacity: 0.85;
  height: auto;
}

.container .btn {
  width: 30%;
  /* height: 10%; */   /* Remove this height */
  opacity: 0.8;
  filter: alpha(opacity=80);
  position: absolute;
  top: 80%;
  left: 70%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 2vw;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  line-height: 100%;
}

.container .btns {
  width: 30%;
  /* height: 10%; */   /* Remove this height */
  opacity: 0.8;
  filter: alpha(opacity=80);
  position: absolute;
  top: 80%;
  left: 30%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 2vw;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  line-height: 100%;
}

<div class="container">
  <img img="" src="" alt="">
  <a href="" class="btn">Registracija Kaune</a>
  <a href="" class="btns">Registracija Vilniuje</a>
</div>

Answer 3

很多解决方案

将图像作为容器的背景图像，然后使用 flexbox

或

使图像位置绝对化，为按钮添加边距，并像下面的示例一样使用 flaxbox

.container {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  max-width: 2400px;
  position: relative;
  overflow: hidden;
}

.container img {
  position: absolute;
  width: 100%;
  opacity: 0.85;
  height: auto;
}

.container .btn, .container .btns{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30%;
  height: 10%;
  min-height: calc(2vw + 24px);
  opacity: .8;
  background-color: #555;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-decoration: none;
  margin: 40% 0;
}

.container .btn {
  left: 70%;
  font-size: 1.5vw;
}

.container .btns {
  left: 30%;
  font-size: 2vw;
}

<div class="container">
  <img src="https://data.whicdn.com/images/50959200/original.jpg" alt="">
  <a href="" class="btns">Registracija Vilniuje</a>
  <a href="" class="btn">Registracija Kaune</a>
</div>

Answer 4

我去掉了按钮上的宽度和高度，并将内边距更改为 %，因此它是响应式的，并且文本在调整大小时始终居中显示。

.container {
  position: relative;
  width: 100%;
  max-width: 2400px;
}

.container img {
  width: 150%;
  opacity: 0.85;
  height: auto;
}

.container .btn {

  opacity: 0.8;
  filter: alpha(opacity=80);
  position: absolute;
  top: 80%;
  left: 70%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 1.5vw;
  padding: 1% 5%;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  line-height: 100%;
}

.container .btns {

  opacity: 0.8;
  filter: alpha(opacity=80);
  position: absolute;
  top: 80%;
  left: 30%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 2vw;
  padding: 1% 5%;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  line-height: 100%;
}

<div class="container">
  <img img="" src="" alt="">
  <a href="" class="btn">Registracija Kaune</a>
  <a href="" class="btns">Registracija Vilniuje</a>
</div>

Answer 5

只需将 bootstrap class 添加到按钮标签中即可

class="text-center";

如何在响应式 css 按钮中对齐文本中心？

How to align text center in a responsive css button?

html

css

button

responsive