主页 / coding / 问题 / 77774375
Accepted
Diego Borba
Asked: 2024-01-08 02:42:14 +0800 CST

如何使用 Bootstrap 5 将嵌入水平居中[重复]

  • 772

我正在尝试使用上面的图像进行集中输入。我按照位置文档进行操作，但不知何故图像没有水平集中：

站点示例

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Title -->
    <title>Title</title>

    <!-- Css -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>

<body>
    <div class="container position-absolute top-50 start-50 translate-middle">
        <embed class="logo" src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo">   
        
        <form action="/streams" method="POST">
            <div class="input-group">
                <input class="form-control border-danger border-5" type="text" aria-describedby="start-button">
                <button class="btn btn-danger" type="submit" id="start-button">Click</button>
            </div>
        </form>
    </div>
</body>
</html>

我尝试手动执行此操作并使用display flex，但没有成功。

html

2 个回答

  1. 使用text-center 链接

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Title -->
    <title>Title</title>

    <!-- Css -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>

<body>
    <div class="container text-center">
        <embed class="logo " src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo">   
        
        <form action="/streams" method="POST">
            <div class="input-group">
                <input class="form-control border-danger border-5" type="text" aria-describedby="start-button">
                <button class="btn btn-danger" type="submit" id="start-button">Click</button>
            </div>
        </form>
    </div>
</body>
</html>

    • 1
  2. Best Answer

    至少有两种选择可以实现此目的：

    • 选项 1：使用 Bootstrap 类text-center
    • d-flex justify-content-center选项 2：在父级上使用 Bootstrap 类<embed>

    请参阅下面的片段。

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Title -->
  <title>Title</title>

  <!-- Css -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>

<body>
  <h1>Using text-center</h1>

  <div class="container text-center">
    <embed class="logo" src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo">

    <form action="/streams" method="POST">
      <div class="input-group">
        <input class="form-control border-danger border-5" type="text" aria-describedby="start-button">
        <button class="btn btn-danger" type="submit" id="start-button">Click</button>
      </div>
    </form>
  </div>

  <h1 class="mt-5">Using flex</h1>

  <div class="container">
    <div class="d-flex justify-content-center">
      <embed class="logo" src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo">
    </div>

    <form action="/streams" method="POST">
      <div class="input-group">
        <input class="form-control border-danger border-5" type="text" aria-describedby="start-button">
        <button class="btn btn-danger" type="submit" id="start-button">Click</button>
      </div>
    </form>
  </div>
</body>

</html>

    • 1

相关问题