Creating a website for my school project has been challenging, especially when it comes to centering text. I have been struggling to position the text in the middle of the background picture despite trying various methods. Here is the HTML code: pastebin.com/0tTLKH5u and CSS code: pastebin.com/Nzy33fWe
To optimize the layout, one approach is to convert the entire body into a flex container and then make necessary adjustments. While this offers a more efficient solution, it may require significant CSS modifications. As a quick fix, you can position the text absolutely and center it by adding the following CSS to the class:
.display-1 {
font-weight: 500 !important;
letter-spacing: 40px;
transition: ease-in 1s;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
In this scenario, the body serves as the relative element, with your content positioned starting at 50% from the top and left edges of the body. The use of translate ensures that the text remains centered within the layout by adjusting its position by -50% in both the horizontal and vertical axes.
Do you desire this?
div {
width:300px;
height:300px;
background-image: url("https://picsum.photos/300/300");
color:#000;
text-shadow:2px 2px #fff;
display:flex;
align-items: center;
justify-content: center;
font-size:30px;
}<div>Welcome</div>Here is an example showcasing text centered over a background image, achieved by using padding to align the text in both horizontal and vertical positions.
body {
font-family: sans-serif;
background: url("http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/nebula_blue.s2014.png");
}
h1 {
text-align: center;
display: inline-block;
font-size: 52px;
color: white;
padding:20% 20%;
}<!DOCTYPE html>
<html>
<head>
<title>Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="src/styles.css" />
</head>
<body>
<h1>Hello PalowPower !</h1>
</body>
</html>I have implemented jQuery form validation from Here is an example from demo.html <form id="form-signup_v1" name="form-signup_v1" method="get" class="validation-form-container"> <div class="field"> <label for="signup_v1-username">Fir ...
In the process of developing a system, I have encountered a need to display database records in an HTML table. The functionality for creating the HTML table and retrieving data is working as expected. However, I am facing an issue with adding a column cont ...
My json response has been decoded into an array $data: stdClass Object ( [outboundSMSMessageRequest] => stdClass Object ( [deliveryInfoList] => stdClass Object ( [deliveryInfo] => stdClass Object ( [address] => 8606142527 [deliveryStatus] => ...
After switching my site's doctype from XHTML to HTML5, I have made the following changes: I currently have: <!DOCTYPE html> <html lang="en-GB" xml:lang="en-GB" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> Now my question is, do I sti ...
I'm currently working on customizing the styling of a menu using CSS in a project that involves the use of "react-horizontal-scrolling-menu". While I've been successful in styling the menu items with .menu-item:hover & .menu-item:active, I am ...
Is there a way to turn off bootstrap tooltip on my website? I activated it with the code below: function activateTooltip() { const toolTips = document.querySelectorAll('.tooltip'); toolTips.forEach(t => { new bootstrap.Tooltip(t); } ...
My previous projects involved using ASP.NET MVC and utilizing @Html.Partial("_header") to incorporate common static HTML across different pages. However, my current project is a pure HTML CSS and JS web app with no server-side technology. The la ...
I'm currently developing an "HTML editor" for one of my webpages. Right now, I want to ensure that the editor only allows input of HTML and CSS elements without any Javascript (or Jquery). I've been attempting to prevent the use of <script> ...
I am facing an issue with my navigation bar. I have set the position to fixed to keep it at the top, but this is causing the drop-down functionality to stop working. Please advise on where I should move the position fixed property so that my nav bar remai ...
I'm in the process of creating a Star Rating component for our website using Angular 11. I've managed to render the 5 stars based on the current rating value, but I'm having trouble getting the hover styling just right. Basically, if I have ...
Updated I've made some edits to clarify my request. My website is built using HTML5, CSS3, and JQuery, resulting in all content being on one page. During updates, I want the ability to set an option in a configuration file so that when users visit m ...
As I observe the use of @import with mixins and partials in the code, I find myself puzzled as to why the programmers did not simply write @import style.css. Instead, they imported Susy, bourbon, vendors, utilities, and bases. It's a bit confusing to ...
Hey there! I'm currently working on creating a page with a variable number of resizable divs. These divs can be resized horizontally using Bootstrap's col classes (col-2 through col-12), and vertically with no limits. Additionally, new divs can b ...
Having trouble getting my background image to repeat on the y-axis when viewed on a mobile device. On desktop, the page doesn't scroll and the background image fills the screen perfectly. However, when switching to tablet or mobile, scrolling is neces ...
When using the append method, my inner div is only attaching one WHEAT-COLORED-BOX, whereas when using appendTo, my inner div attaches all the required number of WHEAT-COLORED-BOXES. Therefore, in this case, appendTo gives the correct result while append f ...
Is there a way to assign unique random colors to each individual p tag in ReactJS? function App() { return ( <div> <p style={{ color: "#7fbd73" }}>Hi</p> <p style={{ color: "#3a82e4" }}>Hello</p> < ...
I am looking to convert an Html page to pdf, but the HtmlPage contains many unclosed tags like: < hr > < br > Because of these unclosed tags, I am unable to create a Pdf. Is there a way to close these tags using HtmlUnit in Java? What I need ...
Having an issue with editing or locating a plugin's HTML template on WordPress. Wondering if it is possible to replace the content of one HTML element with another using just CSS? Appreciate any help! ...
After downloading a CSS dropdown menu from purecss.menus.com, I attempted to modify it by changing the main menu to display horizontally instead of vertically. However, I am now struggling to figure out which part of the CSS code needs to be adjusted in or ...
I'm encountering an issue with a new website I'm working on. This is my first time utilizing SVG's. Essentially, I need to crop a circle that remains centered on the page from my image to reveal the image beneath the element. Although I atte ...