Creating a horizontal line with text centered using Angular Material's approach

Implementing Angular Material, my objective is to design a horizontal line with a word positioned in the center. Similar to the one showcased here.

I experimented with this code, achieving a close result, but I aim to align the lines vertically to the middle of the word or.

<div layout="row" layout-align="center start">
  <md-divider flex></md-divider>
  <div style="flex: 0 1 auto;">or</div>
  <md-divider flex></md-divider>
</div>

http://jsfiddle.net/devotis/a7m6xrwy/

Incorporating styled <hr>'s on the left and right might enhance this code structure while staying compliant with Angular Material standards?

cssangularjsangular-material

Answer №1

If you're looking for a neat solution, try utilizing the layout="row" attribute in combination with flex.

<span layout="row"><hr flex/>or<hr flex/></span>

Check out this JS fiddle that demonstrates how to apply this concept to button text: http://jsfiddle.net/a7m6xrwy/1/

You can easily customize the styling of the hr element using CSS. While the md-divider directive may not be suitable for this purpose, it's unnecessary to try and manipulate it. If you prefer to use a directive to address this issue, consider creating your own custom md-divider directive that accepts the display text as a parameter.

Answer №2

Here is a neat solution that utilizes material's mat-divider:

<h1>Separating Divider</h1>

<div class="container">
  <div class="line"><mat-divider></mat-divider></div>
  <div class="text mat-typography">Hello world</div>
  <div class="line"><mat-divider></mat-divider></div>
</div>

.container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.line {
  flex: 1;
}

.text {
  padding-left: 10px;
  padding-right: 10px;
}

The final output will be similar to this:

View the image here

Answer №3

Here's a solution for those utilizing Angular Material 2 and the flex-layout library. It may not be perfect, but it gets the job done.

<div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="5px">
  <mat-divider fxFlex="1 0"></mat-divider>
  <div>or</div>
  <mat-divider fxFlex="1 0"></mat-divider>
</div>

Answer №4

Works like a dream.

<mat-divider style="width: 40%; display: inline-block;"></mat-divider>
<span style="padding: 20px; font-weight: 500;">Or</span>
<mat-divider style="width: 40%; display: inline-block;"></mat-divider>

PS: Consider creating CSS classes for the inline styles to improve readability.

Result:

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

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

The error message "Undefined is not a function" is being thrown by the $onAuth function in Firebase's AngularFire Authentication

I've been working on updating an application to utilize the latest Firebase Authentication methods. Although most parts are functioning correctly, I encountered an issue while attempting this. myApp.controller('StatusController', function( ...

angularjsfirebaseangularfire

Font appearance varies between Chrome and Firefox browsers

I'm relatively new to the world of web development and have encountered an issue with a menu I created. The buttons in the menu have varying widths depending on the browser being used – Firefox or Chrome. In Firefox, the last button in the menu lin ...

htmlcssgoogle-chromefirefoxfonts

Is it possible for a website administrator to view the modifications I have made to the CSS and HTML code?

Is it possible for a website to detect any temporary changes made to their CSS or Html through developer tools, even though these changes are not permanent? ...

htmlcss

Incorporating fresh CSS styles through Selenium

I am attempting to showcase all the prices available on this page using Selenium and Chrome in order to capture a screenshot. By default, only 3 prices are visible. Is there a way to disable the slick-slider so that all 5 prices can be seen? I have tried r ...

pythoncssseleniumweb-scrapingslick.js

Asynchronously running a function in AngularJS

My controller passes execution to a factory -- controller.getCustomerById -> factory.getCustomerByID. The factory function is posting and retrieving data via MVC/angular.$http.post, which works fine, but the subsequent actions in my controller function ...

angularjsasynchronousasync-await

Tips for creating a fading effect when hovering over a div element

Hello, I am currently working on a project where I have a span that displays over an image on hover. I would like to add a bit of javascript or css transitions to make this div fade in to about 0.8 opacity when hovered over, and then fade back to 0 opacity ...

javascriptjqueryhtmlcss

Issue with Bootstrap 5 dropdown menu extending beyond the viewport on the right side

The user dropdown in my code is cut off, even though I'm using Bootstrap 5. I came across an older article on stackoverflow suggesting to add .dropdown-menu-left or .dropdown-menu-right to the </ul>, but that didn't solve the issue for me. ...

htmlcsstwitter-bootstrapbootstrap-5

Can HTML and CSS be used to create button text that spans two lines with different fonts?

When working with HTML attribute values, I am facing an issue where I can't get button text to display in two lines with different font sizes. I have attempted using whitespace in CSS for word wrap, but this solution does not solve my problem. I also ...

htmlcss

Creating an If statement tailored for a particular image source: a step-by-step guide

In the program I am running in Dreamweaver, there is a specific line of code that looks like this: function go() { if((document.test.test1.src == document.test.test2.src && document.test.test2.src == document.test.test3.src )) ...... ...... ..... ...

javascriptcssswitch-statement

Tips for determining if a cookie has been set in a controller during an Angular unit test

A scenario involves a controller that transmits a username and password to a REST service, receiving a token in return: .controller('Login', ['$scope', '$cookieStore', '$http', function($scope, $cookieStore, $http) ...

angularjsunit-testingcookies

Leveraging ng-model with expressions in ng-repeat in AngularJS.Would you

Currently, I am tasked with creating a form for a multilanguage content management system using angularJS. The language list has been defined within the angular scope as follows: $scope.languages = [ {id:0,'name':'English'}, {id:1, ...

javascriptangularjsangularjs-ng-model

Increasing space at the top with heading

As I scroll down, the header on my website remains in a static position and disappears. However, when I scroll back up, the header reappears wherever the user is on the page. While this functionality works well, I have noticed that as I scroll all the way ...

javascriptjqueryhtmlcss

AngularJS showcasing data in a visually appealing layout

Successfully connected API and displaying data, but now encountering an issue with formatting the data into a table. When using ng-repeat="item in items", if used within a tr tag, only one row is shown. If used within a tbody tag, it repeats the tbody. He ...

angularjs

Transparent CSS Table Styling

Can you create a CSS effect where all content inside a table becomes transparent on hover? For example: <table><tr><td> AN IMAGE </td> <td> SOME TEXT </td></tr></table> So if either the image or the text ar ...

csstransparency

Tips for positioning a picklist field dropdown on top of a lightning card in Lightning Web Components

Attempting to resolve an issue with CSS, I have tried adding the following code: .table-responsive, .dataTables_scrollBody { overflow: visible !important; } However, the solution did not work as expected. Interestingly, when applying a dropdown pickli ...

javascripthtmlcsssalesforce-lightninglwc

Create a scrollable Bootstrap table without impacting the layout grid system

Is there a way to create a scrollable table without impacting the grid system layout? How do I make a table scrollable while keeping the col-xs tag intact? <table class="col-xs-12"> <thead> <th class="c ...

csstwitter-bootstraphtml-table

Loading the app.js file in Grails 3 from src/main/webapp folder

Trying to set up a basic Grails 3 and Angular application. When testing it locally, I expect my app.js file to be loaded first and then load my index.html. Uncertain about how the index/main gsps function, but from what I know, using asset-pipeline, it sh ...

angularjsgrailsasset-pipelinegrails3

Incorporating DefinitelyTyped files into an Angular 2 project: A step-by-step guide

I am currently developing an application using angular 2 and node.js. My current task involves installing typings for the project. In the past, when starting the server and activating the TypeScript compiler, I would encounter a log with various errors rel ...

javascriptangularjsnode.jstypescriptnpm

Typical configuration for Angular using npm

I need help finding a standard structure for my Angular 1.5 project. I am looking to obtain it from npm with basic functionality, such as adding Bootstrap and other features. I would like something similar to the setup described in this article. I have se ...

angularjsnpmangular-ui-bootstrap

What is the best way to initiate an Airflow Dag from a NodeJS environment?

Is it feasible to remotely trigger the AirFlow Dag that updates snowflake tables from NodeJS in our specific scenario? ...

angularjsnode.jsairflow