Iam trying to centre a div Horizontally. I added "text-align: center" to div. But it does not work. Can you please add your suggestions?
Except in IE6, this is a bug.
You can fix the width of the block using margin: 0 auto
#block_div{ margin: 0 auto; width: 200px; border: 1px solid red; } <div id="block_div">center a div using css</div>
To center div in CSS Horizontally, Just use text-align property with value center property
Suppose this is your HTML ELement
<div class="container"> <p>This text needs to center Horizontally</p> </div> <style> .container { font-size: 25px; width: 450px; margin: 35px; height: 200px; font-family: arial; outline: dashed 2px black; } </style>
p {
/* To Center horizontally*/
text-align: center;
}
To center an element horizontally with Flexbox, just apply justify-content: center and display: flex to the parent element:
<div class="container"> <div class="child_class"></div> </div> .container { margin: 35px; width: 450px; font-family: arial; font-size: 25px; height: 300px; outline: dashed 1px black; justify-content: center; display: flex; } .child_class { height: 50px; width: 50px; background-color: green; }
To center a <div>
horizontally, you can use the following CSS properties:
.center-div {
margin: 0 auto; /* This centers the div horizontally */
}
Margin: 0 auto;
: This sets the top and bottom margins to 0 and the left and right margins to "auto", which effectively centers the <div>
horizontally within its containing element.
Then, apply the center-div
class to the <div>
you want to center:
<div class="center-div">
<!-- Content goes here -->
</div>
.parent-div {
display: flex;
justify-content: center;
}
Can do it by
1| .div{
margin: 0 auto;
}
2| .div{
display : flex;
justify-content : center
}