如何在響應式 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>

下面是它的外觀圖片：

這是它在桌面上的外觀：

這是它在移動/調整大小的瀏覽器上的外觀：

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

我添加了一個類名為 btn-container 的 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>

Answer 2

嘗試移除高度：10%； from.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

或者

使圖像 position 成為絕對圖像，為按鈕添加邊距，並像下面這樣使用 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

假設img用於背景，您可以使用css代替。 現在，對於按鈕，您可以使用display: flex;

 .container { display: flex; align-items: start; justify-content: center; height: 100vh; background: url('https://coolbackgrounds.io/images/backgrounds/index/ranger-4df6c1b6.png'); }.container.btn { opacity: 0.8; filter: alpha(opacity=80); color: white; background-color: #555; font-size: 1.5vw; padding: 1em 2em; cursor: pointer; border-radius: 5px; text-align: center; text-decoration: none; }.container.btn:last-child { margin-left: 1em; }

 <div class="container"> <a href="#" class="btn">Registracija Kaune</a> <a href="#" class="btn">Registracija Vilniuje</a> </div>

Answer 6

只需將引導程序 class 添加到您的標簽中

類=“文本中心”；