Is there a way to vertically center text within a div and also horizontally center the div at the top of the screen?
Visit this link for more details
<div id='custom'>
example text
</div>
#custom{
width: 50%;
background: #FF0000;
z-index: 99999;
transform-origin: center center;
position: absolute;
left:50%;
top: 10px;
margin:0 auto;
height: 52px;
border-radius:10px;
}
It seems like this is the solution you're looking for
#custom {
width: 50%;
background: #FF0000;
z-index: 99999;
transform-origin: center center;
top: 10px;
position: absolute;
margin: 0 auto;
height: 52px;
border-radius: 10px;
/*-----*/
line-height: 52px;
left: 0;
right: 0;
}<div id='custom'>
textfsdfsdfsdfsdfsd
</div>To align text vertically within a div, ensure that the line-height matches the height of the div. For horizontal alignment of absolute elements, set left and right to zero with margin: 0 auto
this solution worked perfectly for my needs
#custom{
width: 50%;
background: #FF0000;
z-index: 99999;
transform-origin: center center;
top: 10px;
margin:0 auto;
height: 52px;
border-radius:10px;
text-align: center;
padding-top: 7%;
}
After making some adjustments as suggested, I was able to center the div without using absolute positioning. I also added padding to ensure the text centered vertically within the div.
I'm experimenting with the html5 <picture> tag to set different images. I placed the 2 pictures within a bootstrap grid, allowing them to be responsive until the breakpoint 768px, where the image changes. However, when I decrease the browser si ...
My current project utilizes React 18 and webpack 5 with the module federation plugin. I am exploring the possibility of integrating Next JS with module federation, but I am encountering an issue where the host project is not able to fetch styles from the r ...
Is there a way to make my text expand and display all of its content when hovered over, especially for those sections that are longer than the div size? I currently have some code implemented, but it seems to reveal the text horizontally. I am looking fo ...
I am working on an Ionic app that uses AngularJS. One issue I encountered is with a modal popup that can sometimes extend beyond the visible area. To address this, we applied overflow: hidden to its CSS class. However, there is a specific functionality i ...
I need to style an input field in a way that removes the black borders/frame that appear around it when clicked on in Chrome and MS Edge. Strangely, Firefox does not display this frame/border. How can I achieve this consistent styling across all browsers? ...
I'm encountering an issue with Django urls. I need to pass the value entered in the Name input field after clicking the submit button. Let's assume I have the following HTML form- <form method='POST' action="{% url 'submittedf ...
Trying to detect if a navigational element has a specific class upon click. If it has the class, remove it; if not, add it. The goal is to display an active state on the dropdown button while the dropdown is open. The active state should be removed when a ...
I am currently displaying a sub menu on hover using Tailwind CSS. However, I am wondering how I can achieve the exact same functionality by triggering an onclick event instead of hovering over the menu. Here is a DEMO showcasing the current setup. CODE: ...
I'm currently able to store all generic text data in an array, but I'm facing difficulties with the select boxes inside table cells. In my jQuery script, I have the following: $('.image-button').click(function(){ var myTableArr ...
Is there a way to ensure that an image always loads, even if the initial load fails? I have tried using the following code snippet: <img class="small" src="VTVFile4.jpg" onload="this.onload=null; this.src='VTVFile4.jpg?' + new Date();" alt=" ...
I am facing a challenge with managing two separate <style> tags that each contain a large number of styles and media queries. The issue is that one set of styles is intended for desktop users, while the other is meant for mobile users. When both se ...
I grabbed this code directly from bootstrap's official documentation: <form class="form-inline"> <div class="form-group"> <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label> <div class="inp ...
Has anyone encountered this issue before? I have a math table coding function, which runs when a button is clicked. However, when I click the button, the table appears on a new page instead of on the same page. <!doctype html> <html> <h ...
I'm having trouble locating the issue in my code, and the text reveal feature isn't working. Interestingly, a simple animation works fine, indicating that there's no problem with the import or library: import { motion } from ...
How can I make the .Bck div stretch to the full height of the browser window? I attempted using jQuery, but the height doesn't adjust correctly when I resize the window. What is wrong with my JavaScript and can this be achieved with CSS alone? <!- ...
Just starting out with Angular and I am looking to dynamically change the value of a hidden input field called 'cc_card' based on the first digit entered in another input field called 'cc_number'. For example, if the user enters 5 in &a ...
My layout consists of 6 Divs floated left to create 6 columns. The width of all these floats combined may extend beyond the window width for most users, especially with the 6th column included. Is there a way for this 6th column to be partially visible ( ...
As I organize my content into an FAQ format, I want users to be able to click on a link and expand the section to reveal a list of items that can also be expanded individually. My goal is to have certain list items expand automatically when the FAQ section ...
I'm struggling to replicate a Bootstrap V4 template where I cannot seem to align the form in the center within a jumbotron div. However, all other text is centered as expected. Even though I copied the code from a tutorial, it functions perfectly the ...
I am looking to implement a feature comparable to the comment system on Stack Overflow for this website. The idea is to enable users to type in a text, click submit, and instantly see it displayed on the page without having to navigate away. It has to be ...