Ways to center text without using the span tag

Is there a way to align text in the center without using the span tag? I want the text to be centered with other content on the sides not interfering.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >

<div class="text-center">

  <br>
  <button class="btn-lg btn-danger col-10 " *ngIf="!login" (click)="isLogin()">Lets started</button>

<div *ngIf="login">

  <form (submit)="submit()">

    <input class="col-auto-2 text-center" type="number" title="Eggs" name="egg" placeholder="Enter amount" [(ngModel)]="protein.eggs"><span>size</span><br>
    <input class="col-auto-2 text-center" type="number" title="Breads" name="bread" placeholder="Enter amount" [(ngModel)]="protein.breads"><span>slices</span><br>
    <input class="col-auto-2 text-center" type="number" title="Tuna" name="tuna" placeholder="Enter amount" [(ngModel)]="protein.tuna"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Meat" name="meat" placeholder="Enter amount" [(ngModel)]="protein.meat"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Cheese" name="cheese" placeholder="Enter amount" [(ngModel)]="protein.cheese"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Cottage" name="cottage" placeholder="Enter amount" [(ngModel)]="protein.cottage"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Quinoa" name="quinoa" placeholder="Enter amount" [(ngModel)]="protein.quinoa"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Almonds" name="almonds" placeholder="Enter amount" [(ngModel)]="protein.almonds"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Powder" name="powder" placeholder="Enter amount" [(ngModel)]="protein.powder"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Gainer" name="gainer" placeholder="Enter amount" [(ngModel)]="protein.gainer"><span>gram</span><br>
    <input class="btn-secondary" type="button" value="Show" (click)="show()">
    <input class="btn-secondary" type="submit" value="Save">

  </form>

</div>

</div>

However, at the beginning of the text, if the size is larger and does not display properly.

https://i.sstatic.net/91Sld.jpg

https://i.sstatic.net/oaynQ.jpg

https://i.sstatic.net/0yU0V.jpg

htmlcssbootstrap-4

Answer №1

Simply set the span element to have a position of absolute.

input + span {
  position:absolute;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >

<div class="text-center">

  <br>
  <button class="btn-lg btn-danger col-10 " *ngIf="!login" (click)="isLogin()">Lets started</button>

  <div class="center-block">

<div *ngIf="login">

  <form (submit)="submit()">

    <input class="col-auto-2 text-center" type="number" title="Eggs" name="egg" placeholder="Enter amount" [(ngModel)]="protein.eggs"><span>size</span><br>
    <input class="col-auto-2 text-center" type="number" title="Breads" name="bread" placeholder="Enter amount" [(ngModel)]="protein.breads"><span>slices</span><br>
    <input class="col-auto-2 text-center" type="number" title="Tuna" name="tuna" placeholder="Enter amount" [(ngModel)]="protein.tuna"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Meat" name="meat" placeholder="Enter amount" [(ngModel)]="protein.meat"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Cheese" name="cheese" placeholder="Enter amount" [(ngModel)]="protein.cheese"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Cottage" name="cottage" placeholder="Enter amount" [(ngModel)]="protein.cottage"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Quinoa" name="quinoa" placeholder="Enter amount" [(ngModel)]="protein.quinoa"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Almonds" name="almonds" placeholder="Enter amount" [(ngModel)]="protein.almonds"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Powder" name="powder" placeholder="Enter amount" [(ngModel)]="protein.powder"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Gainer" name="gainer" placeholder="Enter amount" [(ngModel)]="protein.gainer"><span>gram</span><br>
    <input class="btn-secondary" type="button" value="Show" (click)="show()">
    <input class="btn-secondary" type="submit" value="Save">

  </form>

</div>
  </div>

</div>

Alternatively, you have the option to utilize an inline grid structure

form {
  display:inline-grid;
  grid-template-columns: auto auto auto;
}

span {
  text-align:left;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >

<div class="text-center">

  <br>
  <button class="btn-lg btn-danger col-10 " *ngIf="!login" (click)="isLogin()">Lets started</button>

  <div class="center-block">

<div *ngIf="login">

  <form (submit)="submit()">

    <input class="col-auto-2 text-center" type="number" title="Eggs" name="egg" placeholder="Enter amount" [(ngModel)]="protein.eggs"><span>size</span><br>
    <input class="col-auto-2 text-center" type="number" title="Breads" name="bread" placeholder="Enter amount" [(ngModel)]="protein.breads"><span>slices</span><br>
    <input class="col-auto-2 text-center" type="number" title="Tuna" name="tuna" placeholder="Enter amount" [(ngModel)]="protein.tuna"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Meat" name="meat" placeholder="Enter amount" [(ngModel)]="protein.meat"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Cheese" name="cheese" placeholder="Enter amount" [(ngModel)]="protein.cheese"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Cottage" name="cottage" placeholder="Enter amount" [(ngModel)]="protein.cottage"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Quinoa" name="quinoa" placeholder="Enter amount" [(ngModel)]="protein.quinoa"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Almonds" name="almonds" placeholder="Enter amount" [(ngModel)]="protein.almonds"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Powder" name="powder" placeholder="Enter amount" [(ngModel)]="protein.powder"><span>gram</span><br>
    <input class="col-auto-2 text-center" type="number" title="Gainer" name="gainer" placeholder="Enter amount" [(ngModel)]="protein.gainer"><span>gram</span><br>
    <div>
      <input class="btn-secondary" type="button" value="Show" (click)="show()">
      <input class="btn-secondary" type="submit" value="Save">
    </div>
  </form>

</div>
  </div>

</div>

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

Can someone guide me on replicating this design with Bootstrap?

How do I achieve this layout using Bootstrap? https://i.sstatic.net/Ffvog.jpg I have checked my code but can't seem to find the mistake. Can someone please help me out? <div class="row"> <div class="img-5"> <div class="c ...

htmlcsstwitter-bootstrap

Tips for Preventing Navigation Bar from Triggering Scrolling

I am experiencing an issue with my navbar and body container. Whenever the navbar is present, the page automatically scrolls vertically. However, when I remove the navbar, the scrolling behavior stops. What is causing this scroll behavior with the navbar? ...

htmlcssbootstrap-4

Tips on extracting the price from a specific webpage

Upon visiting a specific webpage, you will notice that various items are listed with their prices in Ethereum (ETH) attached to them: Opensea Collection. For instance, consider the item "Bean #7474" displayed below, with a price of "1.37 ETH": https://i.s ...

htmlselenium-webdriverweb-scrapingopensea

The Quintessential Bootstrap 5 Hero

I'm struggling to determine which classes to add or remove in order to achieve the same image positioning as shown in the preview of the Bootstrap Border hero with cropped image and shadows. My image isn't aligned with the edge of the hero conta ...

htmlcssbootstrap-5

how to position one div above another using css

I currently have a page layout with 7 different div elements structured like this; <div id="container"> <div id="head"></div> <div id="A"> <div id="A1">A1</div> <div id="A2"></div> ...

css

The content inside the inner div does not stretch to match the height of its parent element

I want to address a specific issue I am facing with my div structure. Although it may seem similar to other questions on StackOverflow, none of the existing solutions have worked for me. The problem is that I have two child divs inside a parent div. The h ...

htmlcss

What is the best method for applying margin to an icon within a SASS selector?

I'm trying to figure out how to add a margin right to an icon in my SCSS code, but so far I haven't been able to select it properly despite all the research I've done... Here is my current SCSS code: select{ background-color: hsl(209, 23 ...

htmlcssreactjssasscss-selectors

Why doesn't "align-self: flex-end" relocate the game board to the bottom of the screen?

Hey there, I am currently working on developing a Connect 4 game and have decided to use a table for the board. To position the board properly, I am utilizing flexbox. Although I have specified align-items as 'flex-end' in order to bring it to th ...

cssflexbox

What methods can be employed to prevent a custom CSS from overriding my personal styles?

Issue I've created a website with unique styles that I really like. However, I want to enhance its functionality by incorporating a custom dialog box from the BootBox library. The problem is that the extensive style sheet that comes with BootBox com ...

htmlcsstwitter-bootstrapbootbox

Is there a way to create a miniature camera or map within a scene in three.js without cropping the viewport?

Is there a way to create a mini-map or mini-cam using three.js? The idea is to have two camera views - one mini-map or "mini-cam" in the top right corner (as shown in the image) and the main camera view covering the rest of the scene without the border. ...

javascriptcssdomthree.js

Absence of MVC5 Vanilla Layouts

Creating my first MVC5/Razor application from the ground up, I want to avoid including unnecessary references that cause bloat. In the Views folder, I have separate Home and Shared subfolders. The Home folder contains Index.cshtml, while the Shared folder ...

cssasp.net-mvcrazor

Could leaving the src attribute empty trigger a request on all web browsers?

I'm curious about the safety of using an html image tag like this <img src width="30" height="20"/> When the ImageUrl is not set in ASP.NET, the Image control renders like this. I will populate the src attribute later on the client side I ju ...

htmlasp.netimage

Assist the floats to "ascend" and occupy the available space

The screenshot showcases boxes that have been styled with "float: left". Is there a way to make these boxes float to the first available space in a column? For example, can we move the Music Nation box to the location indicated by the red arrow in the ima ...

csscss-float

I am attempting to draw a correlation between two numerical variables

I'm struggling to compare two scores in my game. When they match, I want it to display "You won", but I can't get it to work. I've attempted using the parseInt method and .val method, but no luck so far. var numberFour = Math.floor(Math.ra ...

javascriptjqueryhtml

Tips on adjusting the CSS to fix the scrolling issue caused by images in a carousel slider

I am facing an issue where a scroll is being created and it appears offset on different screen sizes: https://i.sstatic.net/KYTCN.jpg I need help to resolve this problem and make it responsive. Even after trying to add overflow: hidden; it still doesn&a ...

cssbootstrap-5

"Utilizing a background image within a component to completely cover the entirety

Hey everyone, I need some help with a confusing issue. I'm currently working on an AngularJs project and I am struggling to set a background image for a specific component without affecting the entire application. My goal is to have the image cover t ...

htmlcssangular

iOS fixed positioning and scrolling

One of the current challenges we are facing involves implementing an action button similar to the one found in GMail for adding new content. This button needs to remain fixed during scroll. Here is the HTML code: <div class="addButton actionButton" on ...

javascriptioscsscss-position

Begin a fresh page within a separate window, proceed to print the contents, and subsequently close the window

I am facing some difficulties with this code. I am attempting to use the "onClick" function to change the image once it is clicked, open a new page in a new window, print the newly opened window, and then close it. The issue I am encountering is that while ...

javascriptjqueryhtml

What is the best way to generate a JSON object with Angular and showcase its content through HTML?

Currently, I am dealing with a JSON object that is completely unfamiliar to me. Without knowing the keys or values of this object, I was able to successfully manipulate it and extract the necessary information. Ultimately, I have generated an array (whic ...

htmljsonangulartypescript

Is there a way to compel @keyframes to continue playing until it reaches its conclusion even after a mouseout event

Whenever I hover over an element, a keyframe animation starts playing. However, when I move the cursor away, the animation stops abruptly. Is there a way to ensure that it plays until the end? I've tried using the animationend event, but it doesn&apos ...

javascriptcssanimationcss-animations