+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: Div doesn't want to center? (/showthread.php?tid=5383408)
Div doesn't want to center? - Wide Awake - Aug 22, 2016
I tired a bunch of things and for some reason it doesnt want to center in the page
Code
<div class="element be-hoverlay style1-hover style3-title" style="margin:auto;" align="center">
<div class="element-inner">
<a class="" title="">
<div class="flip-wrap">
<div class="flip-img-wrap zoom-in-effect"><img src="upload/carlos.jpg" alt /></div>
</div>
<div class="thumb-overlay">
<div class="thumb-bg" style="background-color:rgba(216,8,8,0.75); ">
<div class="thumb-title-wrap ">
<div class="thumb-title be-animate animated animation-trigger" data-animation-type="none" style="color: #ffffff;">Driveways</div>
</div>
</div>
</div>
</a>
</div>* - zeroday - Aug 22, 2016
align="center" only centers the content inside of the DIV.
Here's a website you'll find useful, http://howtocenterincss.com/
* - kznamst - Aug 23, 2016
You could use Bootstrap. Then you will center a div adding a class name to it: "center-block".
* - zeroday - Aug 23, 2016
I would suggest not using Bootstrap if you're just starting out. I've saw people use it when they are new and now they can't not use it.
* - Dostoevsky - Aug 23, 2016
You can't really use margin: 0 auto; unless you give it an implicit width.
* - Ankush - Aug 26, 2016
Here's what you have to do to center anything.
For a DIV (or any block element)
Step 1- Give it a specific width, Example- width:500px;
Step 2- margin:auto auto;
For an Inline-block element
Step 1- position:absolution
Step 2- left:0;
Step 3- right:0;
Step 4- margin:auto auto;
Note- This way you can always center any element, if it doesn't work on some element then use display:block/inline-block on that element first.
* - Dinastia- - Aug 26, 2016
If you want to center a div, without specifying the width, you can try with:
Code
#element {
display: table;
margin: 0 auto;
}//jsfiddle.net/segk03hs