- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to horizontally center a <div> in another <div>?
Here I have one html form and one css file(style.css).”o-div” is the outer div and “i-div“is the inner div class.
Example
<html > <head> <title>center a div</title> <link href="../../Content/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="o-div"> I am OUTER DIV <div class="i-div"> I am INNER DIV, I am in Center </div> </div> </body> </html>
Output
I am OUTER DIV I am INNER DIV, I am in Center
Style.css
body {
background-color:Gray;
padding:30px;
}
.o-div {
padding:50px;
background-color:Lime;
}
.i-div {
background-color:Fuchsia;
max-width:400px;
height:200px;
margin: 0 auto;
text-align:center;
}
Updated on 22-Dec-2021 06:36:55
- Related Questions & Answers
- How to set div position relative to another div in JavaScript?
- How to make a div center align in HTML?
- How to center a div on the screen using jQuery?
- How to position horizontal scroll bar at center of DIV?
- How do I center <div> tag using CSS?
- Center Triangle at Bottom of Div in HTML with CSS
- How to duplicate a div using jQuery?
- How to create a div element in jQuery?
- Difference between div~div and div:not(:first-of-type)?
- JavaScript focus a particular element with div class, not div id declaration?
- div() function in C++
- How to toggle a div visibility using jQuery?
- How to horizontally center a widget using a grid() in Tkinter?
- How to load a page in div using jQuery?
- How to center your website horizontally with CSS?
Advertisements