Is there a way to align an element to the right of a centered element?

I am trying to center two inputs ("email" and "password") horizontally on the page. However, I also want to add another item to the right of them while keeping the inputs centered.

<div style={{ display: "flex", justifyContent: "center" }}>
    <div className="col-md-6 row">
        <div className="col-md-6">
            <input placeholder="email" />
        </div>
        <div className="col-md-6">
            <input placeholder="password" />
        </div>
    </div>
    <button text="Entrar" />
</div>

However, when I add the <button> element, all three items become centered. I only want to center the email and password inputs, not the button.

Answer №1

If you want to position an element on the right side, you can use the CSS property position: absolute to take it out of the normal flow of the document. Then, you can use the left and top properties to move it to the desired position. It may require some tweaking of the values to get it exactly where you want, but it will ensure that the other elements stay aligned in the vertical center:

button {
  position: absolute;
  top: 5%;
  left: 75%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div style='display: flex; justify-content: center;'>
  <div class="col-md-6 row" style='background-color: yellow;'>
    <div class="col-md-6">
      <input placeholder="email" />
    </div>
    <div class="col-md-6">
      <input placeholder="password" />
    </div>
  </div>
  <button>Entrar</button>
</div>

Answer №2

Your code could use a little tweak. This response assumes that you want the fields below and aligned to the right.

Here is how it would look:

 <div style={{ display: "flex", justifyContent: "center" }}>
 <div className="col-md-6 row">
     <div className="col-md-6">
         <input placeholder="email" />
     </div>
     <div className="col-md-6">
         <input placeholder="password" />
     </div>
 </div>
 <div className="col-md-6 row">
     <button class="pull-right" text="Entrar" />
 </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

Customize your AutoComplete with MUI styling

Upon taking over a project, I found myself working with material ui for the first time. Here is an excerpt from my code: <FormControl fullWidth> <InputLabel className={className} htmlFor={id} error={error} > ...

Column flexbox self is not functioning properly with text ellipsis

Is there a way to apply text-overflow: ellipsis to a flexbox element? I know I need to set the width and overflow: hidden, but how can I achieve the ellipsis effect within the grey block when the text overflows? Removing the flexbox property from the < ...

The positioning of the Bootstrap dropdown menu is not aligned correctly

Issue with positioning Bootstrap dropdown I recently encountered a problem where I placed a bootstrap dropdown inside a div that centers the dropdown using CSS "text-align: center", but the dropdown menu still appeared in its original position. It seems l ...

Issues with CSS causing image resizing problems on Chrome, looking for solutions

On my website, I have favicons from various external domains. However, there seems to be an issue with resizing them when they are not 16px in size. Sometimes only the top or bottom half of the image is displayed, but upon refreshing the page, the entire i ...

Mobile Website Blog Page With Dual Sidebars Issue

I have created a blog page using bootstrap 4 that features both left and right sidebars along with the main content section. Everything looks great on Desktop view. However, when viewed on a mobile phone, the order changes to: left-sidebar>content> ...

The CSS styles do not seem to be taking effect on the Bootstrap

Here's a snippet of code extracted from my website's html and css files. My intention is to make the navbar slightly transparent with centered links, but for some reason, the css styles are not applying correctly to the navbar. HTML <body ...

Issues with Bootstrap columns not displaying correctly in versions 5 with col-sm-6 and col-md-4

When using Bootstrap 5, the col-sm-6 and col-sm-4 classes do not function correctly on small and medium screens, but work fine on large screens. The goal is to display 2 images on small screens and 3 images on medium screens. However, only 4 images are dis ...

Internal link formatting using CSS styling

I have a question about formatting links with fonts and colors to make them clickable. I managed to achieve the desired font and color styles using a specific code snippet, but struggled to make the link clickable: <table border="0" cellpadding="1" cel ...

Enhancing bar border with the addition of a separator

Our current situation is similar to this: https://i.stack.imgur.com/Luj1S.png but our goal is to have a chart with separators on both sides of the age brackets, like this: https://i.stack.imgur.com/03UpO.png In order to achieve this, we have utilized t ...

Display or conceal a div based on the size of the screen using HTML and CSS

Hey there, I recently finished my first React Project and I’m wondering if there’s a way to hide the 'side-menu' section on mobile screens using CSS. Any suggestions? <div className='side-menu'> <SiderComponent /> < ...

Tips for implementing resizable Material-UI Dialogs

I'm working on a project that involves creating a dialog box that can be resized and dragged. While I found steps in the Material-UI Dialog documentation on how to make it draggable, I'm still looking for information on how to make it resizable. ...

When I zoom in, a different div replaces the original div

I have recently delved into the world of HTML and CSS as I embarked on creating my own website. However, I seem to have hit a snag - when I zoom in on the content, it overlaps with the menu. I have scoured the internet for a solution to no avail, so any as ...

Experience the magic of a customized cursor that disappears with a simple mouse movement in your website,

I have been experimenting with designing a custom cursor for my website. After finding a design I liked, I made some adjustments to suit my needs. However, an issue I encountered is that when I scroll, the custom cursor also moves away from its original po ...

I would like to add an underline below the title

.thumb-text { position: absolute; width: fit-content; left: 50%; transform: translateX(-50%); } .thumb-text h3 { font-family: Georgia; font-size: 30px; color: black; font-weight: 900; } .thumb-text h3::after { content: ''; p ...

Added the .active state to the menu navigation successfully, however the active color was not implemented

My primary navigation menu is managed by WordPress and can be seen below. I aimed to modify the active state when a user clicks on a link in the menu by adding background-color and color for styling purposes. Although changing the background-color upon cl ...

Is there a Polar transformation available in CSS3?

Converting a line into a ring is a straightforward process in graphic design software like GIMP: https://i.sstatic.net/7lQZe.png (source: adamhaskell.net) I'm exploring the possibility of achieving the same effect using CSS. Here's what I&ap ...

Achieving a layered effect: Bootstrap Navbar on Carousel

Currently, I am designing a mockup and aiming to create a full-screen carousel with the navigation bar links positioned on top of the images. At the moment, the navbar appears transparent until I scroll down the image/slider making it full screen. How can ...

Utilizing Typescript to pass props to a material-ui button enclosed in styled-components

After setting up my react project using the typescript template, I decided to style the material-ui Button component using the 'styled' method from the styled-components library as shown below: import React from 'react'; import styled f ...

Create a single CSS style rather than using multiple CSS styles

I currently have multiple CSS styles applied: form#reply_form-c1r1.odgovor div#cmtforms-c1r1 input{color:red} form#reply_form-c2r1.odgovor div#cmtforms-c2r1 input{color:red} form#reply_form-c3r1.odgovor div#cmtforms-c3r1 input{color:red} form#reply_form-c4 ...

The div element with the id "wrapper" is not functioning properly within the box model

I have defined an ID wrapper in CSS: #wrapper { position: relative; background: yellow; -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2); width: 960px; padding: 40px 35px 35px ...