Html - How to horizontally center an Embed using Bootstrap 5

DiegoBorba
January 7, 2024
101 views
0 votes
2 Answers

I’m trying to do a centralized input with an image above it. I am doing it following the position documentation, but somehow the image doesn’t get centralized horizontally:

Code:

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

I’ve tried to do it manually and using display flex, but with no success.

Answers

use text-center link

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

There are at least two options for how you can do that:

Option 1: Using Bootstrap class text-center
Option 2: Using Bootstrap classes d-flex justify-content-center on the parent of the <embed>

See the snippet below.

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

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to horizontally center an Embed using Bootstrap 5

Code:

Answers