Building a Horizontal Line Component in ReactJS

Looking for help with my login page design. I have two login buttons - one for regular login and one for Google login. I want to add a stylish horizontal line with the word "OR" between the buttons, similar to the image in the link provided.

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

I'm struggling to figure out how to position the lines on either side of the "OR" word. Would using the RemoveIcon be appropriate for this situation?

Please take a look at my code sandbox for reference: CLICK HERE

<div className={classes.center}>
            <Button
              type="submit"
              color="primary"
              variant="contained"
              className={classes.mb2}
            >
              Sign in
            </Button>
          </div>
          <div className={classes.center}>
            <RemoveIcon />
            OR
            <RemoveIcon />{" "}
          </div>
          <div className={classes.center}>
            <Button type="button" variant="contained">
              Sign in with Google
            </Button>
          </div>

Answer №1

To enhance the look of the lines, consider utilizing pseudo elements

or: {
  position: "relative",
  marginBottom: "10px",
  "&:before, &:after": {
    content: "''",
    display: "inline-block",
    height: "1px",
    width: "40%",
    background: "#00000044",
    position: "absolute",
    top: "50%"
  },
  "&:before": {
    transform: "translate(-70%, -50%)"
  },
  "&:after": {
    transform: "translate(70%, -50%)"
  }
}

<div className={`${classes.center} ${classes.or}`}>OR</div>

https://codesandbox.io/s/login-forked-pe7ee?fontsize=14&hidenavigation=1&theme=dark

Answer №2

To achieve center alignment, simply include alignItems: "center" within the "center" CSS class

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

Cannot retrace steps in file tree using ../

My website has a file structure set up like this: css style.css other files... templates index.html other files... I am attempting to reference the style.css file from my index.html document. My initial attempt was to navigate back a directory u ...

Using jQuery to enable scrolling and dynamically changing classes

I'm currently working on enhancing my website with a feature that changes the opacity of the first section to 0.4 when a user scrolls more than 400 pixels down the page. I attempted the following code without success: if($("html, body").offset().top ...

Tips for optimizing the placement of div elements for top advertisements on Amazon's website

I'm looking to overlay some divs on top of Amazon.com ads, similar to the image above. This is part of a personal project where I need to position these divs precisely over the ads. To achieve this effect, I've been using getBoundingClientRect t ...

The conceal feature doesn't appear to be functioning properly on jQuery Mobile

I am facing an issue with a small mobile app built using jQuery Mobile. Within a div, I have three buttons and other content. My goal is to hide these three buttons if the user's device is running on Windows (WP). The buttons are defined as follows: ...

Creating a List programatically in material-ui can be easily achieved by following these steps

I am attempting to create a contact view using the list component from Material-UI. My code is written in typescript, but I am struggling with setting up react and material-ui correctly. Any guidance would be greatly appreciated. export interface IConta ...

The module 'react/lib/React' could not be located within the file 'ReactTestUtils.js'

Setting up unit-tests for a React Native project using ReactTestUtils is causing an issue with npm test. The error message I receive is: Cannot find module 'react/lib/React' from 'ReactTestUtils.js' I suspect that my dependencies are ...

Highlight the parent item when the child item is being hovered over

I am working on a menu that has 2 submenus. I want to use jQuery to highlight the item when it is hovered over. However, I am struggling with how to also highlight the parent item when the cursor is on the child item. The class I am using for highlighting ...

Unlocking the Secrets of MUI TextField Styling

I am interested in creating a styled component using the styled() function and 'div'. My goal is to apply styles for the div that mimic Material UI's TextField component, including properties such as border and hover effects. Is it feasible ...

Issues with Bootstrap Navigation Collapse Utilizing Data Attributes

I'm having trouble getting a Twitter Bootstrap 3 navbar to collapse using data attributes, as it is not expanding properly. Just to give some context, the project I am working on is an ASP.NET C# MVC project that runs on DNN (DotNetNuke) CMS. When I ...

"Challenges in styling a table within a div: the text fails to adhere to the

I am struggling to identify the source of a problem in my code. The issue seems to be related to the padding within the parent div, specifically with the text "1 Healthy Midday Meal for One Child Overseas" and how it is ignoring the 5px right padding. Upon ...

The z-index of two elements seems to be behaving differently than anticipated

I am encountering an issue with the code provided below, which is a simplified version of a larger problem. Can you explain why, if: .div_A {z-index: 10;} < .div_C {z-index: 20;} the button inside div_C appears behind div_A? I need to understand the ...

A comprehensive tool for testing JavaScript, CSS, HTML, and jQuery code

Currently, I am working on an extension for Google Chrome that consists of multiple .js, .css, and .html files. My coding process involves using Notepad++ as my primary tool. However, I find myself needing to conduct testing at various stages of developm ...

Exploring the wonders of CSS with Socialchef

Hey, I recently came across a solution on Stack Overflow where they provided code for SocialChef to convert decimal inputs into fractions. I'm wondering how I can write or incorporate some code to input fractions and mantissa as a fraction... I ...

I have to transmit certain information across various React components

I'm currently working on a broker simulator project and I am faced with the challenge of passing data (side, price, volume, timestamp) into a different tab, which is located in a distant relative component. Unfortunately, I am unsure of how to transpo ...

Issue encountered: Trying to utilize the <Link> component outside of the <Router> component in React three fiber and react-router-dom, resulting in an error message

Someone told me that react-router-dom cannot be used with react-three-fiber because of technical issues involving the provider not being accessible inside the canvas. I attempted to place a Link tag outside of the canvas, and while it does redirect to anot ...

What is the best way to save an object in a variable in MeteorJS/React for future retrieval?

This code snippet is located at the bottom of a component called 'Block'. export default theBlockContainer = createContainer(({ params }) => { return { voteStatus: Meteor.user()['listofvoted'], } }, Block); Although the ...

Implementing momentLocalizer with moment.js in react-big-calendar alongside fullcalendar.js

I'm currently working with react-big-calendar and I require assistance in setting up localization as per the example provided on GitHub. import BigCalendar from 'react-big-calendar'; import moment from 'moment'; BigCalendar.setLo ...

Placing one element beside another element

I am facing an issue with my layout where I have a list taking up 100% of the height and next to it, I am attempting to place an image box. Here is the fiddle link for reference: https://jsfiddle.net/wrdvkgyj/ Even after setting my image container to inl ...

Switch the application's theme dynamically by calling an API after a user clicks a button

Recently, I've been delving into the world of next.js and react, but I've encountered a roadblock that's been giving me some trouble. I need my application to dynamically change its theme after making an API call. The stack I'm working ...

Is there a way to deactivate a button child component while a cell is being edited in a neighboring table component?

Managing the state of two child components - a table and a button through their parent component in a react javascript code can be tricky. Below is a simplified version of the code: //Parent component's code class Data extends Component { construct ...