A <div> (division) tag is used as a container to divide your HTML page into multiple sections. When you create a new <div> tag without any CSS style being applied, it will not inherit anything from its parent tag, you would see that a line-break is introduced before and after the div element.
By default the div will be left-aligned to the page or the container which holds it, in order to horizontally center align it, you could try one of the following,
Using display:inline-block
Using margin: 0 auto;
<div class="outerDiv" id="outerDiv" style="width:100%"> <div class="innerDiv" id="innerDiv" style="margin: 0 auto;width:50%;background-color:#eee;text-align:center"> Inner Div Element text that needs to be horizontally aligned to center of the page </div> </div>
Let's have two div tags - we call them the inner div and other div. If you check the below code, it will align the inner div to top right.
<div class="outerDiv" id="outerDiv" style="width:300px;background-color:#eee">
<div class="innerDiv" id="innerDiv" style="padding:10px;background:#ccc">
Inner Div Element text
</div>
</div>
We would require to apply CSS to both divs in order to horizontally center align the inner div. Add width:100% to outer div so it takes up browsers width, also add text-align:center if you want the text it in to be center-aligned as well. To the inner div add display:inline-block.
<div class="outerDiv" id="outerDiv" style="width:300px;background-color:#eee;width:100%;text-align: center">
<div class="innerDiv" id="innerDiv" style="padding:10px;background:#ccc;display: inline-block;width:100px">
Inner Div Element text
</div>
</div>
⚠️ Note: One of the older and easiest way to achieve this wrapped the div with a <center> tag, please be aware that center tag is deprecated in HTML5.
- How to create a circular Image using pure CSS Code
- Horizontally Center Align tag in HTML using CSS
- Add scroll to div element in HTML Css
- Change CSS Background Opacity with Examples
- How to make text bold using CSS
- How to place two div elements next to each other
- Vertically Center Text in a DIV Element
- align image at middle of div element
- Tailwind CSS Hello World Example
- How to make div or text in html unselectable using CSS
- Only Chessboard using HTML and CSS Code Example
- Simple CSS Grid Example
- How to set CSS background-Image Property
- CSS Background Opacity with Examples
- reCAPTCHA Implementation Tutorial
- List of 32 CSS cursors web developers must know about
- How to Vertically Center Align Text in a Div using CSS Code Example
- 10 Must Know CSS Border Styles with Examples
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- CSS: Apply opacity only for div background and not text
- Set Falling Show on Website for Christmas using Pure CSS Code
- How to make jsfiddle bootstrap ready
- Elegant CSS Box Shadows Ideas
- Responsive Web Design with CSS Media Queries: A Beginner's Tutorial [Updated for 2023]
- How to Center Align Image in Bootstrap
More Posts:- How to Indent Python code in Notepad++ - Python
- How to Compare Strings in Bash - Bash
- String Boot + Redis - SET and GET String Commands Examples - Java
- Notepad++ display files on tab bar as horizontal instead of vertical - NotepadPlusPlus
- Type R is already defined error : Android Error - Android
- [Fix] java.time.zone.ZoneRulesException: Unknown time-zone ID - Java
- Building library Gradle Project Info: Downloading services.gradle.org - Android-Studio
- Notepad++ Happy vs Unhappy Versions - NotepadPlusPlus