Guide to centering Embed horizontally with Bootstrap 5

My goal is to create a centralized input with an image positioned above it. I have been following the guidelines provided in the position documentation, but the image still does not align horizontally:

https://i.sstatic.net/awWxL.png

Here's the code snippet:

<!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbd9d4d4cfc8cfc9dacbfb8e95889589">[email protected]</a>/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 have attempted to resolve this by manually tweaking the layout as well as utilizing display flex, yet without any success.

htmlcssbootstrap-5

Answer №1

Here are a couple of ways to achieve that goal:

  • Method 1: Utilize the Bootstrap class text-center
  • Method 2: Employ Bootstrap classes d-flex justify-content-center on the parent element containing the <embed>

Take a look at the code snippet provided below.

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

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

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

  <!-- CSS -->
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abcdefeed4d9ded8cbeaea9946dd0ddd3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>

<body>
  <h1>Using text-center Class</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 Image">

    <form action="/submit" method="POST">
      <div class="input-group">
        <input class="form-control border-success border-3" type="text" aria-describedby="submit-button">
        <button class="btn btn-success" type="submit" id="submit-button">Submit</button>
      </div>
    </form>
  </div>

  <h1 class="mt-5">Using flex Classes</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="Company Logo">
    </div>

    <form action="/submit" method="POST">
      <div class="input-group">
        <input class="form-control border-success border-3" type="text" aria-describedby="submit-button">
        <button class="btn btn-success" type="submit" id="submit-button">Submit</button>
      </div>
    </form>
  </div>
</body>

</html>

Answer №2

try using text-center styling, check out this helpful link

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

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

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

    <!-- Css -->
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="096b66667d7a7d7d7637597c793a76727276">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-392oCoB2AiuYxbRTLjjGVpyCjRP1eMvGYusTtvl0OnGL9RHAIab/bnFyXTgNySWEuCAiDqU" crossorigin="anonymous>
</head>

<body>
    <div class="container text-center">
        <embed class="logo " src="https://www.yourwebsite.com/logo.png" alt="Company Logo">   
        
        <form action="/" method="POST>
            <div class="input-group>
                <input class="form-control border-success border-3" type="text" aria-describedby="submit-button>
                <button class="btn btn-primary" type="submit" id="submit-button>Submit</button>
            </div>
        </form>
    </div>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to add child elements to the parent element when the height limit has been reached?

This is the code I've been working on: <ul style="height:200px;width:100%;"> <li>Hi</li> <li>Hi</li> <li>Hi</li> ... (add more items here) </ul> Here is a preview of how it currently looks: ...

htmlcss

Allowance for text overflow on subsequent line

Below is the snippet of HTML code I am working with: <h4 class="clickbelow">This is a very long line that overflows onto a new line when the width is small.</h4> Here is the CSS that I have implemented: .clickbelow:before { content: url( ...

htmlcss

Not implementing auto-scroll feature because of the presence of `position: sticky` or `position: fixed` CSS properties

I'm encountering a console warning while working on my Nextjs project. Here is the snippet of my code: <aside className={`site-off desktop-hide ${showMenu ? "show-menu" : ""}`}> .... </aside> And here is the relevant ...

cssnext.js

Tips on avoiding the accumulation of event handlers when dealing with click events triggered by the document selector in jQuery

I am currently working on a project that involves using AJAX to load various pieces of HTML code. This is done in order to properly position dynamic buttons within each portion of the HTML content. In my case, I need to trigger click events on the document ...

javascriptjqueryhtmlajax

Inserting a line break in real-time within a JSX statement

Currently working on a React application that retrieves song lyrics from an API. The API provides me with a lyrics_body attribute as a string, which I use to showcase the lyrics on the webpage. However, when React renders it, the format is not ideal becau ...

javascripthtmlreactjsjsx

Can I retrieve the element of any DOM element I'm currently hovering over using JavaScript?

Suppose I have this HTML snippet: <body> <div id="1"> <span class="title">I'm a title!</span> </div> <div id="2">I'm the first element!</div> <div ...

javascripthtmlhoverevent-listener

Unable to load the Universe 55 font using the @font-face rule

I recently encountered an issue with using a custom font (Universe 55 font) in html5. I downloaded the .ttf file, applied it with the @font-face rule, and tested it on various browsers including IE, Chrome, and mobile browsers. Unfortunately, the font does ...

htmlcssfont-facetruetype

How to make Vuetify grid columns wrap and fill the full height

I am facing an issue where the component created using v-card in a grid system does not fill the full height. I tried using d-flex but it did not work as expected. The middle column with a white v-card should occupy the entire column height but it is gett ...

cssvue.jsvuetify.js

What is the reason behind lightbox not disabling scrolling?

While using the default lightbox2 CSS and JavaScript, everything is functioning correctly except for an issue on Safari mobile. When I click an image and the lightbox opens, swiping to the left reveals blank white space despite having overflow-x set to hid ...

javascripthtmlcsslightboxlightbox2

The table value is only updated once with the onclick event, but the updated value is not displayed when the event is clicked again

I am facing an issue with updating names in a table through a modal edit form. The first name update works perfectly, but the second update does not reflect in the table. I want every change made in the modal edit form to be instantly displayed in the tabl ...

javascriptcssajaxhtmldom

Direct your attention to the div element using ng-click

I'm encountering a complex issue while developing an AngularJS input helper component for number fields in my web application. To better explain the problem, let me give you some background on how our components function: Each component consists of i ...

jqueryhtmlangularjsfocustabindex

Attempting to retrieve an image from a specified div ID within Android Studio

I find myself at a loss for where to even begin with this issue, so I've been stumbling through it. While I've come across some similar posts, I haven't had any success in making them work. My goal is to utilize the div id to retrieve a spe ...

androidimagehtmlgetelementsbytagname

Using a Second List Element in CSS Image Rollover Map with jQuery

I have been utilizing this interactive map from Wolf's website, but I am interested in incorporating a secondary list of countries alongside the existing one as the base for the script. However, due to presentation reasons, the second menu cannot resi ...

jquerycssrolloverimagemap

The li elements in a horizontal menu all have equal spacing between them, filling the width of the ul

I designed a horizontal menu navigation system using HTML elements ul for the main menu container and li for menu list items. The layout is structured with display table for ul and table-cell for li. However, I encountered an issue where there are inconsis ...

htmlcss

A guide on rotating loaders and inserting custom text within loaders using CSS

Seeking assistance to modify my code for creating a unique loader design. The inner loader needs to remain static with only top and bottom segments, while the middle loader rotates anti-clockwise and the outer loader rotates clockwise. Additionally, the ...

htmlcss

Turn off the CSS hover effect for a custom button if the ng disabled attribute is set to true

My goal is to disable custom buttons, and the disable(pointer) function is working correctly. The issue arises when we try to hover on the button, as the hover effect still works. I therefore need to disable hover as well. I am looking to apply ng-disabl ...

jqueryhtmlcssangularjs

Customizing CSS to override Semantic React UI styles

Is there a way to customize the default Header provided by react semantic UI? Currently, I have placed my Header within a div so that I can apply custom styles. <div className="portfolioTitle"> <Header as="h1">Check out this amazing ...

cssreactjssemantic-uisemantic-ui-react

I am looking for guidance on the proper way to import MatDrawer and MatDrawerContainer in the app.module.ts file for an Angular

When attempting to implement a side nav using angular material and clicking on the toolbar icon, everything was functioning correctly until I encountered an error while trying to open the navbar: The error message displayed: Unexpected directive 'Ma ...

htmlangulartypescriptwebangular-material

Hovering over a dropdown menu results in the color not completely filling the background of the desired element

.nav-main { background-color:#09F; width:100%; height:100px; color:#FFF; line-height:40px; } .nav-main .logo{ float:left; padding: 40px 5px; font-size:1.4em; line-height: 20px; } .nav-main > ul { margin:0; ...

csshoverbackground-color

javascript implementing number formatting during keyup event

When I try to format a number in an input field on the keyup event, I receive a warning in my browser console that says "The specified value "5,545" cannot be parsed, or is out of range." The value in the input field also gets cleared. How can I solve this ...

javascripthtmljquery