Unable to align text in the center

I'm having an issue with aligning my text perfectly in the center. How can I resolve this while still maintaining the ability to adjust it vertically?

<center>
    <div class="home-text">
        <div class="col-md-6 col-md-offset-3">
            <h1 class="home-title bounceInUp animated">NAME</h1>

            <h2 class="home-desc bounceInUp animated">HTML, CSS, JavaScript, Python</h2>
        </div>
    </div>
</center>

.home-text {
    position: absolute;
    left: 50%;
    top: 45%;
    color: rgb(255, 255, 255);
}
htmlcss

Answer №1

Take out the left:50% declaration from .home-text and include this new CSS:

h1, h2 {
  text-align: center;
}

Answer №2

Set the home-text width to 100%, with a display of block and align the text in the center.

No longer have the left position, instead opt for a relative position or specify both left and right as 0.

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

Whenever I press a button, my desire is for each picture to seamlessly reposition itself in the exact same spot on the screen

Having some issues with my code. When I click a button, the plan is for the pictures to change one by one to simulate a traffic light sequence. However, when I run the code, all the pictures appear at once without any effect from the button. Any help in ac ...

javascripthtmlcss

User 'consult' accessing from localhost has been denied entry due to lack of password

Having a domain with bluehost, I am trying to connect to the database but have forgotten my password. After much searching, I managed to find the username and localhost name. As a beginner, I could use some help in retrieving the phpmyadmin password. Belo ...

phphtmlcss

Enhance your Bootstrap navigation menu with eye-catching hover effects

Hey everyone, I'm a beginner in web development and I'm attempting to incorporate a hover effect into my navigation menu. I want it to look like the first example in this link: https://codepen.io/Calloumi/pen/vndlH I've tried to replicate t ...

htmlcssbootstrap-4

I'm looking to increase a specific value by a set amount each time there is an input event triggered

I have created a range slider, but I am facing an issue with the oninput event. I want to increment a specific amount whenever the slider is adjusted. For example, I want to increase the amount by $150 when the slider is at $2000, and by $45000 for a parti ...

javascripthtmlcss

Vue2 data vanishing mysteriously

I created a basic webpage using vue2 to convert binary numbers to decimal. However, I encountered an issue where the data disappears when submitting the binary value in an HTML form. <template> <div class="bar"> <input id="str" t ...

javascripthtmlvue.jsvuejs2

Showcasing the information stored within my li element, I am able to access and view the data through my console

I want to showcase the data in the browser Upon hitting the api call, I retrieve the data in my console. The challenge lies in displaying the data within my li tag. Below are snippets of my relevant code and the entire code can be found in the gist links p ...

javascripthtmlangularangular2-templateangular6

Using Javascript, capture user input to execute a search function without the need for a submit button

I am attempting to retrieve input from a textbox and utilize that value to conduct a search without the need for a submit button. The goal is for the search results to be displayed on the page as soon as the content in the textbox changes. I have been br ...

javascripthtmlformstextboxuri

Safari's problem with auto-filling forms

I am in the process of designing a payment form. I need to have the fields for credit card number and its expiry date set to autofill. The Chrome browser is functioning correctly, but Safari is not recognizing the expiry_date field for autofill. Below are ...

htmlsafariautofill

Using Selenium to interact with a checkbox in a React component's ::before pseudo-element

I've been attempting to select a checkbox, and here are some of the methods I have tested: //label[string()=('Notify user')]/i //div[@class='b-checkbox'] //div[@class='b-checkbox']//label//input[@type='checkbox&apo ...

javahtmlreactjsselenium

Vanishing Tooltip following an implementation of the backdrop-filter

I'm having an issue with the blur effect on my background image. Although it works well, my tooltips also end up being blurred behind the divs: https://i.stack.imgur.com/BMdh4.png Is there a way to ensure that my tooltips stay on top of the subseque ...

javascripthtmlcss

Modal displaying undefined value with jQuery

I have been attempting to display data from a database in a table within a modal using the provided code. However, I keep encountering an issue with receiving an undefined value. Here is the accompanying image: https://i.sstatic.net/fPTIW.png Modal HTML ...

javascriptphpjqueryhtml

Utilizing AJAX and JavaScript to create a countdown timer for a targeted HTML element

Here's a question broken down into two parts: I am looking to incorporate some JavaScript that triggers the #refresh function in order to display a count-up timer in text format. This timer should start at 0 seconds and run up to 3 minutes before ref ...

javascripthtmlajaxjquery

Customizing input element styling with Angular Reactive Forms validation rules

My current reactive form setup is as follows: this.loginForm = this._fb.group({ email: ['', [Validators.required, Validators.pattern('^[A-Za-z0-9._%+-]<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99b2d9fef4f ...

javascripthtmlcssangular

Troubleshooting a problem with CSS styling in a jQuery bounce effect

In my current project, I am experimenting with creating a unique 'hovering' link. When the user hovers over an image and then moves the mouse away, I want the link to 'jump' back instead of using jQuery animation. +-----------+ | I ...

jqueryhtmlcss

An unusual icon with three varying sizes in a single file

I have come across an interesting favicon file. Click here to download the favicon file Unfortunately, I am unable to upload this image file as it does not meet the required format standards. Upon viewing the file in Windows 7, a fascinating discovery w ...

htmlcssimagefavicon

Instructions on how to add an ExternalLink to a webpage linking back to the previous page

I'm in the process of creating an error page for my app, and I'm trying to figure out how to add a Wicket ExternalLink that takes users back to the previous page. I believe I need to store the parameters or entire URL of the last visited page, b ...

javahtmlhttpweb-applicationswicket

Leveraging the power of PHP sessions within jQuery/HTML/Ajax

Following a successful login attempt, my PHP script initializes a session in the following manner: session_set_cookie_params(1800,'/','www.mydomain.com',true); session_start(); header("location:mainpage.html"); Now, I have ...

phpjqueryhtmlajaxsession

Creating a great user experience with Knockout JS and Bootstrap Modal

I created a straightforward webpage with a button that triggers the opening of a modal. You can view all my code in this JSFiddle: JS Fiddle Also provided below: $('#displayDetails').click(() => { let obj = { Overview: ' ...

javascripthtmljqueryknockout.jsbootstrap-modal

How can we align the top edge of a div to the center of a circle within a separate div in a responsive manner?

I want to create 2 stacked divs: the first div contains a circular image, and the second div contains text. I want the second div to always cover half of the circle, with its upper edge positioned at the center point of the circle. This is my code: .cov ...

javascripthtmlcssbootstrap-4

Tips on incorporating Angular ng-include

As a newcomer to AngularJS on an Express Framework, I am facing an issue with loading HTML pages as includes. Although my routing in Angular is set up correctly and functioning well, when I try to use ng-include in my HTML pages, it results in a loop and t ...

javascriptjqueryhtmlangularjsinclude