css 如何使用Bootstrap 5水平居中嵌入

qnakjoqk 于 2024-01-09 发布在 Bootstrap

关注(0)|答案(2)|浏览(157)

此问题在此处已有答案：

Bootstrap Center Vertical and Horizontal Alignment（18个答案）
Vertical Align Center in Bootstrap 4 [duplicate]（20个答案）
昨天就关门了。
我试着用一张图片在上面进行集中输入。我是按照 * 职位文档 * 来做的，但是不知何故，图片没有水平地集中：

的数据

代码：

<!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来完成，但没有成功。

css

来源：https://stackoverflow.com/questions/77774375/how-to-horizontally-center-an-embed-using-bootstrap-5

2条答案

按热度按时间

bvjveswy1#

至少有两种方法可以做到这一点：

选项1：使用Bootstrap类text-center
选项2：在<embed>的父类上使用引导类d-flex justify-content-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>
  <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>

字符串

展开查看全部

赞(0）回复(0）举报 2024-01-09

gopyfrb32#

使用text-centerlink

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

字符串

展开查看全部

赞(0）回复(0）举报 2024-01-09

我来回答

css 如何使用Bootstrap 5水平居中嵌入

代码：

2条答案

相关问题

热门标签

最新问答