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

问题描述 投票：0回答：1

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

代码：

<!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 css bootstrap-5
1个回答
0
投票

使用

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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.