前端之家

  1. 首页
  2. 问答

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

• 问答

我有一幅图像，里面有两个按钮。我希望这些按钮能够响应并且文本始终居中并在调整图像大小时调整大小。调整浏览器大小或在移动设备上浏览时，这些按钮内的文本不会居中，甚至变得更糟。我想念什么？以下是图片和按钮的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%);
  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>

下面是它的外观图像：

这是它在桌面上的外观：

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

这是在移动/调整大小的浏览器上的外观：

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

SZLM668 回答：如何在响应式CSS按钮中对齐文本中心？

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

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

我添加了一个名称为btn-container的div，该div包含按钮并位于中间

<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>
,

尝试移除高度：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%);
  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>

,

许多解决方案

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

或

将图像位置设为绝对，在按钮上添加边距，然后使用下面的esample这样的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>

,

我摆脱了按钮上的宽度和高度，并将填充更改为％，这样它可以响应，并且在调整大小时，文本将始终居中显示。

.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%);
  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%);
  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>

,

只需将bootstrap类添加到按钮的标签中

  

class =“ text-center”;

buttoncsshtmlresponsive
本文链接：https://www.f2er.com/3098669.html

大家都在问