What are some ways to position text in the center of a page without using divs?

Is there a way to center text on a page when there is a floating div affecting the alignment? I noticed that the text centers around the div instead of the entire page. How can I solve this issue?

For a better understanding, please view in fullscreen mode.

#img1 {
width: 220px;
height: 220px;
}

#box1 {
  width: max-width;
  height: 1650px;
  background-color: #ECECEC;
}

#box2 {
float:left;
padding-left:250px;
}

#box3 {
text-align:center;
}

#p1 {
  text-align:left;
}    
<div id="box1">
<div id="box2">
<img id="img1" src ="images/hack.jpg"/>
</div>
<div id="box3"
<p id="p1">
lorum ipsum lorum ipsum lorum ipsum lorum ipsum<br>
lorum ipsum lorum ipsum lorum ipsum<br>
lorum ipsum lorum ipsum lorum ipsum<br>
lorum ipsum lorum ipsum lorum ipsum lorum ipsum<br>
lorum ipsum lorum ipsum lorum ipsum lorum ipsum<br>
lorum ipsum lorum ipsum lorum ipsum lorum ipsum<br>
lorum ipsum lorum ipsum lorum ipsum<br>
lorum ipsum lorum ipsum lorum ipsum lorum ipsum<br>
lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum<br>
</p>
</div>
</div>

htmlcss

Answer №1

Make sure to include the following code inside box number 2:

position:absolute;

Don't forget to delete the text-align: left from #p1.

By doing this, your text will be centered on the entire page, even when that box is floating to the left.

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

What is the best way to update the content of a div using a variable within a function in AngularJS?

I have a dilemma with my HTML pages. The index.html page displays product information from a JSON file, and I want the details of a specific product to show up on detail.html when users click on it. Though an alert can display the details, the innerHTML of ...

javascriptjqueryhtmlangularjsjson

Injecting AngularJS directives and styling elements into the body section of a Twig template using the {% block body %} tag

I'm currently in the process of constructing a Rest API using Symfony 3 and Fosresbundle, with AngularJS responsible for fetching JSON data within twig templates. However, I've encountered an issue where I need to specify angularJS directives an ...

angularjshtmltwigsymfony

Encountered an error trying to access '0' property of an undefined object when iterating through data in angular framework

My API is returning data in the format shown below: "fileName": "data.txt", "onlyInFile1": [ { "_id": "60618e87c2077428e4fedde5", "TERMINAL_ID": "Y6152114", "EXTERNAL_STAN": & ...

htmlangulartypescript

Issue with navigation bar small box alignment on the left side

Hey there! I'm relatively new to bootstrap and html, and I've encountered an issue with my navbar setup. When I create my navbar, a small box appears on the left side of my screen. Here's an example <head> <meta charset="ut ...

htmlcssbootstrap-4

What are some ways to obscure the stored password in a database with characters like asterisks or other symbols

Currently, I am working on developing the admin features for my website and have been using this resource to assist with adding users: One issue that I have encountered is that when I added a password field, it appears in its stored form which is not idea ...

phpjqueryhtml

Do static and relative elements without any additional properties always appear in the identical position when rendered?

While working with elements, I have come to understand that when an element has a position of relative, it serves as a fixed point for elements inside it with absolute positioning. Additionally, I have learned that with relative positioning, I have the abi ...

htmlpositioningcss

Tips for creating sliding header content alongside the header

Is it possible for the content in the header to scroll up, displaying only the navigation list and hiding the logo when a user scrolls on the website? Currently, while the header background slides up, the content within the header remains in place. I feel ...

jqueryhtmlcssscrollnav

What are the drawbacks of utilizing CSS word-wrap across all elements on a website?

Is there a downside to utilizing the CSS property word-wrap:break-word in this manner? body { word-wrap: break-word; } The definitions for the values of this property are as follows: normal: Breaks words only at allowed breakpoints break-word: Perm ...

css

What could be causing the text-end to fail in Bootstrap 5?

Why can't I align the text to the right? Feeling frustrated as a beginner. <div class="top-bar"> <div class="container"> <div class="col-12 text-end"> <p><a href="tel:06 ...

htmlcssbootstrap-5

Unable to display images in CodeIgniter when using the html helper function

As a newcomer to CodeIgniter, I am looking to retrieve data from a MySQL database using CodeIgniter. The data I am working with is an image, and I have organized my application with the following folder structure: 1. ci application controllers views ...

phphtmlcodeigniter

Exploring the possibilities of customizing gutters in Bootstrap v4 Beta

Is it possible to customize grid gutters at different breakpoints? I am aware that Twitter invested millions of dollars in perfecting Bootstrap v4, and I don't expect to overhaul everything overnight. However, I am curious if there is a way to create ...

csstwitter-bootstrapsassbootstrap-4

Disappearing Value Dilemma in Submit Button

I'm encountering an issue with a button. After making a minor modification to an echo line, the button that I have to submit a form suddenly has a blank value. This only happens when I make this specific change. I am aware of the duplicate IDs of "sub ...

phphtmlformssubmit

Adjusting the height of an <iframe> element to match the full height of the document

My code snippet is: <iframe src="http://www.externalsite.com/" style=""/> I need to set the height of the iframe to match the total height (X pixels) of www.externalsite.com. Since X is unknown, how can I achieve this using CSS or alternative metho ...

htmlcssiframe

Conceal a specific DIV class when another class is visible

In my WordPress project, I am working on a customization where the add to cart button on the product page should remain hidden until the customer answers all the questions. The plugin I am using offers options for the customers to select, such as Step 1, S ...

javascriptjquerycsswordpress

Centralized and standardized approach to invoking a function

Explaining this concept may be a bit challenging, but I'll give it a shot: Within the .boxes class div, there are looped elements with the class .box. Each .box element contains two child elements: one with the class .box-header and another with the ...

javascriptjqueryhtmlangularjs

The placement of DropLeft is incorrect

I have encountered an issue while designing a navbar with Bootstrap 4. I have placed my links on the right side of the navbar. However, when I add a dropdown to the left side of the navbar, the dropdown appears in the wrong position. Can anyone help me ide ...

htmltwitter-bootstrapbootstrap-4

select specific region within image

I'm currently working on cropping an image and sending the cropped data to the server side. To achieve this, I am utilizing the imgareaselect plugin. While I am able to obtain the coordinates of the selection, I am facing challenges in actually croppi ...

javascriptjqueryhtml

HTML View of JSON Object Hierarchy

Hello, I have been trying various methods but am struggling to figure out how to display the following JSON object as a tree HTML view with ul li items using JavaScript. Can anyone help me with this? [ { "CategoriesModelId": 7, "Name": "Parent ...

javascriptjqueryhtmljson

CSS animation fails to animate the object

I am encountering an issue with a CSS animation that I am trying to implement for each child within a nav element. Specifically, I am attempting to create a dynamic stock panel. Interestingly, when I add another CSS attribute like color, it works as expec ...

javascripthtmlcss

Transitioning from a fixed position to absolute in CSS3

Sticky Logo Element In my project, I implemented a logo element that is positioned absolutely within the document. As the user scrolls, the logo sticks to the top of the window with a fixed position (you can view an example here: https://jsfiddle.net/swzb ...

javascripthtmlcss