What is the best way to insert a horizontal line in the middle of a line and include additional content using Vue.js?

I am working on a Login component and trying to center the content like this image. I have tried using horizontal lines but it's not working as expected. Check out my desired output here: [Output 2]. Can someone help me achieve this with simple HTML and CSS?

Login.vue

<template>
<div class="main">
    <div class="container">
        <img id="side-img" src="../assets/sideImg.png" alt="notFound" />
        <p id="side-content">Online Book Shopping</p>
        <div class="box">
            <div class="headings">
                <h5 class="signin" id="login" @click="isLogin = true">Login</h5>
                <h5 class="signup" id="signup" @click="isLogin = false">signup</h5>
            </div>
            <form ref="myForm">
                <div class="username">
                    <p>EmailID</p>
                    <input type="email" id="Email-input" class="emailbox" required v-model="email" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
                </div>
                <div class="password-section">
                    <p>Password</p>
                    <input :type="password_type" class="password"  id="passField" v-model="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$" required>
                    <i class="bi bi-eye-slash" id="togglePassword" ></i>
                </div>
                <div class="forget-section">
                    <a href="">Forgot-password</a>
                </div>
                <div class="btn-section">
                    <button type="submit" class="login-btn">Login</button>
                </div>
                <div class="seperator">
                    <h5>OR</h5>
                </div>
            </form>
        </div>
    </div>
</div>
</template>

<script>

</script>

<style lang="scss" scoped>
@import "colors";

.main .container{
    margin-top: 185px;
    left: 320px;
    width: 624px;
    height: 391px;
    background: #F5F5F5 0% 0% no-repeat padding-box;    
    border-radius: 21px;
    opacity: 1;
}
img{
    margin-top: 52px;
    margin-left: 53px;
    width: 245px;
    height: 245px;
    background: transparent  0% 0% no-repeat padding-box;
    opacity: 1;
    border-radius: 50%;
}
.container p{
    color:$light_black;
    margin-top: 31px;
    margin-left: 71px;
    margin-bottom: 39px;
    width: 309px;   
    height: 24px;
    text-align: left;
    font: normal normal medium 18px/24px Roboto;
    letter-spacing: 0px;
    color: $light_black;
    text-transform: uppercase;
    opacity: 1;
    font-weight: 500;
}
.box{
    background: $pale_white 0% 0% no-repeat padding-box;
    box-shadow: 0px 5px 15px #00000029;
    border: 1px solid #E4E4E4;
    border-radius: 6px;
    opacity: 1;
    height: 425px;
    width:389px;
    margin-top: -406px;
    margin-left: 358px;
}
.headings{
  display:flex;
  float:left;
  opacity: 1;
  padding-top: 28px;
  color: $light_black;
  text-transform: uppercase;
  padding-left:69px;
  width: 89px;
  height: 33px;
  text-align: left;
  font: normal normal medium 25px/33px Roboto;
  letter-spacing: 0px;
  color: $light_black;
  text-transform: uppercase;
}
.signup{
    padding-left: 92px; /* 82 */
    
}

.username p{
    text-align: left;
    font: normal normal normal 12px/13px Roboto;
    letter-spacing: 0px;
    color: #0A0102;
    text-transform: capitalize;
    opacity: 1;
    width: 36px;
    height: 13px;
    margin-top:91px;
    margin-left: 69px;
    margin-bottom: 0px;
}
.emailbox{
    background: $pale_white 0% 0% no-repeat padding-box;
    border: 1px solid $border_clr;
    border-radius: 2px;
    opacity: 1;
    margin-left: 69px;
    width: 252px;
    height: 35px;
}
.password-section p{
    text-align: left;
    font: normal normal normal 12px/13px Roboto;
    letter-spacing: 0px;
    color: $light_black;
    text-transform: capitalize;
    opacity: 1;   
    width: 44px;
    height: 13px;
    margin-top: 15px;
    margin-left: 69px;
    margin-bottom: 0px;
}
.password{
    background: $pale_white 0% 0% no-repeat padding-box;
    border: 1px solid $border_clr;
    border-radius: 2px;
    opacity: 1;
    width: 252px;
    height: 35px;
    margin-left: 69px;
    
}

.forget-section a{
    text-decoration: none;
    color:#9D9D9D;
    width: 81px;
    height: 13px;
    
    // font: normal normal normal 1px/13px Roboto;
    letter-spacing: 0px;
    color: #9D9D9D;
    opacity: 1;
    margin-left:202px;
    margin-top:3px;
}
.btn-section .login-btn{
    margin-left:69px;
    margin-top:14px;
    width: 252px;
    height: 37px;
    background: #A03037 0% 0% no-repeat padding-box;
    border-radius: 3px;
    opacity: 1;
    font: normal normal normal 15px/20px Roboto;
    letter-spacing: 0px;
    color: #FFFFFF;

}


.headings{
    cursor:pointer;
}
.box:hover{
    box-shadow: 0 1px 5px $grey;
}
.bi-eye-slash{
     margin-left:-27px;
    // cursor: pointer;
    // position: relative;
}


</style>

Answer №1

To prevent the need for additional tags, tasks like this can often be accomplished using ::before and ::after.
Here is an example of how you could achieve it:

.separator h5 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 1em;
}

.separator h5::before,
.separator h5::after {
  content: "";
  display: block;
  flex-grow: 1;
  height: 1px;
  background: #ccc;
}

.separator h5 span {
  padding: 0 2em;
}
<div class="separator">
  <h5><span>OR</span></h5>
</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

Maintaining consistent text spacing within a div, regardless of its minimum height: a javascript solution

I'm developing a JavaScript feature for creating status posts on a webpage. Within the "compose a post" div, there is centered text that reads "enter your text here" (using contenteditable). The issue I am facing is that when a new line is entered in ...

How to determine the completion of async iteration in HTML using the lightswitch concept

I am facing a challenge with nested async operations. I am unsure how to determine when everything is finished. Below is a snippet of my code: msls.showProgress(msls.promiseOperation(function (operation) { screen.Staff.getConfirmedWaiters().then( ...

Ways to update the content within an IFRAME using server-side methods

I've searched through many posts, but I still haven't found a clear solution to my problem. Here's what's going on: I have a page with an IFRAME that is pulling content from a different domain. The style of the frame doesn't match ...

React Semantic UI - A modern solution for semantic web development

Having trouble styling React Components with Semantic UI for React (). I've customized Semantic UI's styles Core, but sometimes I need to incorporate my own styles into their components. I prefer using the BEM methodology for CSS naming conventi ...

What are two ways to tell them apart?

<?php if($_SERVER["REQUEST_METHOD"] == "POST") { } ?> <form action = "" method = "post"> <label>Name of vegetable</label><br> <input type = "text" name = "vegetable" class = "box" placeholder="Enter Ve ...

Full height container with footer

Currently facing an issue with a page I am working on. Here is a snippet of the code: <div id="header"> // header.. </div> <div id="content"> // content where ajax is loaded (should cover at least 100% of the site height) <!- ...

What is the most effective method to override parent styles while utilizing CSS Modules?

I'm currently using NextJS along with CSS Modules for styling purposes. One of my goals is to adjust the appearance of a component in different scenarios: When it's rendered normally on a page, utilizing props to specify className modifiers. W ...

Aligning UL LI elements vertically for multi-line textORHow to vertically

I am dealing with a ul list that contains both single and multi-line li text. The issue is that the second line of the multi-line text starts at a different indentation than the first line. I need a simple solution to resolve this problem that works seaml ...

How can I guarantee consistent UTF-8 encoding in Nokogiri parsing, ERB templates, and encoding HTML files using Ruby?

After successfully parsing parts of a website, I encountered an issue with UTF8: get '/' do url = '<website>' data = Nokogiri::HTML(open(url)) @rows = data.css("td[valign=top] table tr") erb :muster I am now attempting ...

Diverging Width Values Between Chrome and Firefox with Jquery's .width() Method

Currently, I am implementing this JQuery script for my table. $(document).ready(function () { var tableBottom = $(window).height() - $('#compare-table').height(); $(window).scroll(function (event) { var y = $(this).scrollTo ...

Alert: '[Vue warning]: Directive "in testing" could not be resolved.'

Currently, I am running unit tests within a Vue 2.0 application using PhantomJS, Karma, Mocha and Chai. Although the tests are passing successfully, I am encountering a warning message with each test indicating an issue like this: ERROR: '[Vue warn ...

What is the best way to center text vertically in a circular div?

Struggling to achieve a circle-shaped div with centered text? While it's easy to horizontally align text in the middle, achieving vertical centering can be a challenge. Various methods such as vertical-align, padding, and display have been attempted, ...

The ScrollToTop feature in MUI component seems to be malfunctioning when paired with the useScrollTrigger hook

I am in the process of developing a custom ScrollToTop component using MUI's useScrollTrigger hook. More information can be found at this link Feel free to check out the sample code here: https://codesandbox.io/s/stackoverlow-mui-usescrolltrigger-er9 ...

Achieving Text Centering in kableExtra Cells with CSS: A Step-by-Step Guide

Recently, I received a helpful solution that involved using the extra_css = argument in cell_spec() from the kableExtra package. This allowed me to fill the entire cell of my table instead of just the text inside it. However, even after specifying align = ...

Circular picture contained within a Bootstrap column on an irregularly-shaped image file

I am looking to create a circular effect for an image that is originally rectangular, resembling a typical profile picture. I have come across several sources on how to do this. The challenge arises in trying to achieve this effect within a bootstrap colu ...

Troubleshooting a problem with media queries causing display:none issues

Check out this HTML email template code we've been testing on various email clients including Gmail, Yahoo, Outlook, Rediffmail, iPhone, and iPad. The template consists of two table blocks - one for web browsers and the other for mobile devices like ...

How can the spacing between Angular Material's mat-card-content and mat-card-actions be adjusted?

I am creating a mat card layout where there are two separate cards within the main card's content section. However, when I add a button for the actions section of the main card, there is no spacing between these two sections. How can I create a vertic ...

The Bootstrap grid system seems to be malfunctioning as the columns are unexpectedly stacking up

Currently, I am working on familiarizing myself with Bootstrap, and I am interested in creating a simple layout with three columns in one row. Below is the code that I have been using, which I copied from an example in the Bootstrap Documentation. <!D ...

Ways to correct the issue of multiple <div>s overlapping each other after being rotated by 90 degrees

Can someone assist me with rotating multiple divs without them overlapping? Below is a simplified version of my code: <div> <div class="rect"></div> <div class="rect"></div> <div class="rect"></div> & ...

Tips for declaring a non-reactive instance property in Vue.js with TypeScript

I am currently in the process of transitioning my Vue.js components to TypeScript. In accordance with the recommendations provided in the documentation, I attempted to utilize Vue.extend() for my component implementation. The code snippet for my component ...