如何在JavaScript中让API生成的文本在Bootstrap卡片中居中？

我正在学习使用API生成内容，但屏幕上显示的生成文本和容器其他内容不对齐。我需要卡片在屏幕中居中、所有文本居中，但API返回的文本只显示在卡片左侧。

原代码 #

JavaScript

const jokeText = document.querySelector(".joke");

async function buscarChiste() {
  const response = await fetch("https://icanhazdadjoke.com", {
    headers: {
      Accept: 'application/json',
    },
  });

  const joke = response.json();
  return joke;
}

async function pulsarBoton() {
  const {
    joke
  } = await buscarChiste();
  jokeText.innerText = joke;
}

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body class="container bg">
  <div class="card row border-primary text-center" style="width: 40rem;">
    <img src="../img/meme.jpg" class="card-img-top mx" alt="...">
    <div class="card-body">
      <h5 class="card-title">Best dad jokes!</h5>
      <div class="col-6 joke text-center"></div>
      <button class="col-6 btn btn-primary" onclick="pulsarBoton()">Pulsa para un nuevo chiste</button>
    </div>
  </div>

  <script src="api.js"></script>
</body>

解决方案 #

1. 修复卡片居中问题

通过Bootstrap的flex布局类实现卡片在屏幕垂直+水平居中：

• 给body添加d-flex justify-content-center align-items-center min-vh-100，确保body占满视口高度并让内部元素居中
• 移除卡片上的row类，该类是用于包裹列的容器，会破坏卡片原有布局

2. 修复文本对齐问题

调整笑话文本容器的类，确保文本完全居中：

• 移除col-6类，改用w-50 mx-auto，既保留原有的宽度占比，又让容器在card-body中水平居中
• 保留text-center确保文本内部居中显示

3. 优化JavaScript代码

response.json()是异步操作，需添加await确保获取到解析后的JSON数据，避免返回Promise对象导致后续解构出错

修改后的代码 #

JavaScript

const jokeText = document.querySelector(".joke");

async function buscarChiste() {
  const response = await fetch("https://icanhazdadjoke.com", {
    headers: {
      Accept: 'application/json',
    },
  });

  const joke = await response.json();
  return joke;
}

async function pulsarBoton() {
  const { joke } = await buscarChiste();
  jokeText.innerText = joke;
}

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body class="container bg d-flex justify-content-center align-items-center min-vh-100">
  <div class="card border-primary text-center" style="width: 40rem;">
    <img src="../img/meme.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Best dad jokes!</h5>
      <div class="joke text-center w-50 mx-auto"></div>
      <button class="btn btn-primary mt-3" onclick="pulsarBoton()">Pulsa para un nuevo chiste</button>
    </div>
  </div>

  <script src="api.js"></script>
</body>

内容的提问来源于stack exchange，提问作者Eric Morancho