Ways to align text and horizontal rule perfectly within a div container?

I need to add some text to my <div> container and make sure it is centered.

.hr {
  background: green;
  height: 50px; margin: 65px 0; width: 3000px;
}
<div class="hr"></div>

This is an illustration of my project:

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

A picture showing my code:

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

Answer №1

I have recently modified an image by changing its color and applying a text-align:center

.hr { 
  background:#f00; 
  height: 50px; 
  margin: 65px 0; 
  width: 3000px; 
  text-align:center;
}
<div class="hr"><span>text</span> </div>

Does this meet your requirements?

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

Transfer the photo and save it to my database

I've been working on creating a form to upload images and store them in my database, but I'm facing some challenges: Notice: Undefined index: fileToUpload in C:\xampp\htdocs\confee\admin\upload.php on line 3 Notice: Un ...

Show a collection of elements containing attributes in JSX

I have a React component where I am displaying data from an array called pkgData: <div className="mainApp"> <div className="pkgsList"> {pkgData.map((p) => <h3 key={p.name}>{p.name}</h3> ...

JavaScript code for opening and closing buttons

I created a button that successfully opens, but I am struggling to figure out how to close it. Can someone assist me with this? Additionally, I have one more query: How can I remove the border when the button is clicked? document.getElementById("arrowb ...

Animating a CSS overlay

My goal is to design an overlay using the following HTML and CSS code snippets div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; } div.absolute { position: absolute; top: 50%; right: 0; width: 20 ...

The properties of the box model applied to unidentified inline boxes

Reference: CSS Specification Text directly contained inside a block container element (not within an inline element) is considered as an anonymous inline element. For example, in an HTML document like this: <p>Some <em>emphasized</em> ...

When it comes to identifying a click outside of an element, the Jquery or Javascript function may encounter some challenges specifically with Internet Explorer

After reviewing various solutions online, I noticed that they all function properly on Chrome and Firefox but encounter issues with Internet Explorer when interacting with an SVG. For instance, consider the following code snippet: $(document).on("click",( ...

Utilize conditional styling along with hover effects in ReactJS

I'm facing an issue where I need to set up a conditional style and a hover effect for TableRows. They work fine individually, but when combined, the hover function stops working. CSS const StyledTableRow = withStyles((theme) => ({ root: { tab ...

Troubleshooting Issue with jQuery replaceWith in Loop

Trying to make it so that when the update button is clicked, the text on the left side becomes an input box: Click the update button and the text on the left will be an input box However, instead of just one input box appearing, all the text on the left s ...

Can a layer be sliced to create a text-shaped cutout?

I want to achieve a cool text effect where the background is visible through the letters. I have explored options with background images and colors, but I haven't found any examples where the underlying layer is revealed. Is this even possible? Imag ...

Canvas displaying inaccurately (unsteady)

While working on a simple HTML5/javascript game, I encountered an unusual issue with the canvas drawings - they seem to be unstable. I have a map that needs to be drawn in a specific way: The background consists of 2 layers: the ocean and the islands. Th ...

The `class="d-none d-lg-block"` is a handy feature in Bootstrap for hiding elements

I am having trouble implementing the class="d-none d-lg-block". It does not seem to be working as expected. Here is the code that I have been attempting to use: Could you please review it and let me know if there are any errors? <div class=& ...

Looking to activate a button only when the checkbox is selected and in an enabled state

I'm struggling to make the button enable when the checkbox is checked and enabled. Additionally, it should be dependent on the textarea scroll above it. Once the checkbox is checked, the page needs to scroll up and down to activate the button. Here& ...

Unexpected resizing of a div due to Vue animation

I'm currently working on a quiz and I'm trying to incorporate some animation effects when users navigate between questions. I've been experimenting with a fade in and out effect, but there seems to be a glitch. Whenever I click the button, t ...

The functionality of onClick or onChange seems to be malfunctioning in the preline user interface select component

I recently integrated the preline UI library into my React project to enhance the design of my website. However, I encountered an issue where using the "select" element with the data-hs-select attribute as suggested by preline UI seemed to cause problems w ...

Z-index behaving abnormally

I've been working on developing a website and one of the key features I'm trying to implement is a slideout menu that slides horizontally when the mouse hovers over it. To make development easier, I initially set the menu to be fully extended by ...

"The application is experiencing issues with loading styles correctly when using jQuery append (Fiddler has been

When attempting to load a div tag using the .append() method, the styles are not loading correctly. Here's the code that was tested: <section id="year-2020" class="tab-panel"> <div class="row accordion"> <header> ...

Tips for positioning two elements side by side in an li element without needing to clear each time

I'm struggling with a stacked list that involves floating an image (icon) alongside text. The constant need to clear after each list item is becoming cumbersome. Anyone have any suggestions for making this more streamlined and tidy? <ul> < ...

Is it possible to achieve a smooth transition to the right using CSS

I'm attempting to create a sliding box effect from left to right using only transitions, similar to this: #box { width: 150px; height: 150px; background: red; position:absolute; transition: all 2s ease-out; right:auto; } .active{ bac ...

Tips for getting my scripts to function properly with my components in next.js?

I am facing an issue with my script while using React and Next.js in my pages/_app.js file. The code snippet is as follows: import axios from "axios"; import { $ } from "jquery"; import App from "next/app"; import Router from ...

What is the best way to extract the post ID from an HTML form and pass it to the views

I am currently working with Django, jQuery, and Ajax. However, I am facing a dilemma regarding how to retrieve the post id in ajax data and utilize it in views.py. Below is the code snippet along with explanatory comments that illustrate the issue I am enc ...