Having trouble aligning text in the middle?

I can't seem to get my text centered on my landing page, despite using top: 50%; left: 50%; in my HTML. Here's the code I have after the <body> tag-

<div style="position: absolute; top:50%; left:50%; width:500px; height:25px"><font size="4" color="white">My Text Here</font></div>

I haven't added any additional CSS except for the Google font styles (shown below).

 body {
    font-family: 'Open Sans', sans-serif;
    font-size: 48px;
  }

This is how it appears on my website-

P.S I'm not very experienced with coding, so if I didn't explain things clearly, please let me know.

Thanks!

csshtmltextcenter

Answer №1

If you're looking for a solution, consider implementing the following code:

View Live Demo

<div style="position: absolute; top:45%; left:55%; width:600px; height:30px; margin-left:-300px; margin-top:-15px;background:#ccc;"> 
<font size="5" color="black">Your Custom Text Goes Here</font></div>

Answer №2

Give this a try instead for improved compatibility and increased reliability.

<div style="position: absolute; top:50%; width:100%; height:1em; margin-top: -.5em; color: white; font-size: 10px; text-align: center;">My Text Here</div>

This code snippet will center the text perfectly on the page by utilizing 'text-align: center;'. The browser will automatically center all text within the specified tag.

It's worth noting that using deprecated tags like the font tag is generally discouraged as their functionality can be easily replicated with CSS. I opted to avoid it and used a more modern approach in CSS instead.

Answer №3

To center the text, simply add:

text-align:center;

<div style="position: fixed; top:50%; left:50%; width:500px; height:25px;text-align:center;border:1px solid"><font size="4" color="black">Your Text Here</font></div>

If this solution works for you, please consider marking it as the correct answer.

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

Turning a text input field into a functional button

I am attempting to create a function that will read the text from a text area, convert it into a string, and display it somewhere on the page. I'm expecting it to show up within the paragraph with the id "biljeske", but currently nothing is being disp ...

javascripthtml

svg displayed within CHtmlView (MFC)

I've been encountering an issue with drawing using SVG in a view that is derived from CHtmlView within my MFC application. Oddly enough, when I copy the same source code into Notepad and open it in Internet Explorer, everything works perfectly fine. F ...

htmlsvgmfc

Hidden Password Field Option in HTML

My HTML password textbox has the input type set as password, but I can still see what is being typed. This shouldn't happen as password inputs should be masked. Can someone please advise me on how to resolve this issue? To replicate, copy the code be ...

javascripthtmlxhtmlhtml5-canvas

Tips for implementing the "AddThis" button on Joomla

I recently installed the AddThis for Joomla! module on my Joomla website. However, I am facing an issue where I cannot get it to float to the left side of the screen like I see on other sites. On some websites, the AddThis button remains in place even when ...

phphtmlcssjoomlaaddthis

Show the file name in the email signature instead of displaying the image

I'm facing a unique challenge with images in my HTML email signature. Sometimes the images are replaced by their file names on certain email hosts. Interestingly, I can't replicate this error now as the images are displaying correctly again! He ...

htmlcssimageemail

Resize a division to fill the window while maintaining original proportions

Is there a way to resize a div so that it fills the entire browser viewport while maintaining its aspect ratio? How can I achieve this using CSS, JQuery, or both? ...

javascriptjquerycsshtml

Stacking the FontAwesome icons on a PrimeNG button

I've been experimenting with various methods to incorporate stacked icons on a pButton in Primeng, but I haven't had any success. Does anyone have a solution that doesn't result in the button being twice its normal height? Here are a couple ...

cssfont-awesomeprimeng

Adjusting grids in Bootstrap according to device orientation

I have a vision for a webpage layout that will feature two columns in landscape mode and switch to one column in portrait mode. Here is an outline of what I have in mind: Landscape: <body> <div class="container-fluid"> <div cl ...

htmlcsstwitter-bootstrap

Tips for preloading a small placeholder image before the main content is loaded

After browsing , I noticed an interesting image loading style. The website initially shows a patterned image before revealing the actual content. This method creates visually appealing content while waiting for the entire webpage to load. Upon inspecting ...

javascripthtmlcssimageload

Conflicting Styles in CSS

Dealing with conflicting style sheets can be a headache, especially when using multiple plug-ins each with their own set of styles. It seems like no matter what I do, conflicts arise everywhere on my page. Is there a simple solution to this problem other t ...

htmlcsswebstylesheet

Angular: How to restrict the compilation of rgba() to #rrggbbaa in your codebase

There are some browsers that do not support #rrggbbaa but do support rgba(). However, in my Angular project, background-color: rgba(58, 58, 58, 0.9) in common.css was compiled to background-color:#3a3a3ae6 in style.[hash].css. How can I prevent this co ...

cssangular

Tips for creating clickable hyperlinks within a chat platform

I'm currently working on a chat feature for my website that pulls messages from a JSON file and displays them using Vue.js. The issue I'm facing is that when a user includes a link in their message, it does not automatically become clickable beca ...

htmljsonvue.js

Tips for accessing attribute values with Selenium and CSS selectors

Below is the HTML code snippet I am working with: <a href="/search/?p=2&q=move&mt=1"> 2 </a> I am trying to extract the content of the href attribute, specifically "/search/?p=2&q=move&mt=1". Could someone provide me with the ...

cssseleniumcss-selectorsselenium-rc

My JavaScript code runs perfectly fine on JSFiddle, but for some reason, it's not functioning correctly on

I need a solution where a new button is generated every time the post button is clicked, and each of these buttons should have its own counter. This works successfully in JSFiddle, but unfortunately doesn't work when I try to implement it elsewhere. ...

javascriptjquerycsshtml

How to perfectly align an image within a button using CSS

I need help creating a button with an image using the following code: .btnWo { position: relative; outline: none; border: none; height: 150px; width: 400px; border-radius: 10px; color: #FFF; } .btnWo img { height: 150px; ...

htmlcss

Utilizing the Bootstrap 4 jumbotron classes to create an interactive image carousel

I've made good progress on my mockup website by laying out the basics. #hero { background: url("https://picsum.photos/1280/710") no-repeat center; background-size: cover; } .book { height: 100px; width: 100px; bottom: 9vh; } &l ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

jQuery - class remains unchanged on second click event

Operations: Upon clicking on an element with the class thumb_like or thumb_unlike, a like will be added or removed for the image using a POST request. The element with the class thumb_count will increase or decrease based on user actions. For example, lik ...

javascriptjqueryhtml

The issue of custom breakpoints not functioning properly with Bootstrap 4's navbar-expand-* feature

Here is my customized Bootstrap navbar: <div class="container-fluid bg-secondary"> <nav class="navbar utep-nav navbar-inverse navbar-expand-lg"> <button class="ut-toggler navbar-toggler ml-auto" type="button" data-toggle="collapse ...

htmlcsstwitter-bootstrapbootstrap-4

Incorrect Date Range Picker Alignment

I am having trouble with the positioning of a mat date-range-picker calendar inside a component. I have a menu component that calls another component called leave, which contains the mat date range picker calendar. The problem is that when I call the leav ...

htmlangularangular-daterangepicker

A step-by-step guide on creating an automatic image slider using the Swiper class in HTML

I am facing an issue with the swiper-container swiper-slider class, where the images are not sliding automatically. I need the image slider to work automatically without the need to click the next and prev buttons. Below is my code for reference. Instead o ...

jqueryhtmlcssbootstrap-4