I'm trying to horizontally center a <div> block element on a page and have it set to a minimum width. What is the simplest way to do this? I want the <div> element to be inline with rest of my page. I'll try to draw an example:
page text page text page text page text
page text page text page text page text
-------
| div |
-------
page text page text page text page text
page text page text page text page text
you can use the position:relative; and then set the left and the top values:
.cenverDiv{
position:relative;
left:30%;
top:0px;
}
If your <div> has position: absolute you need to use width: 100%;
#parent {
width: 100%;
text-align: center;
}
#child {
display: inline-block;
}
After nine years I thought it was time to bring a new version. Here are my two (and now one) favourites.
Margin
Set margin to auto. You should know the direction sequence is margin: *top* *right* *bottom* *left*; or margin: *top&bottom* *left&right*
aside{_x000D_
display: block;_x000D_
width: 50px;_x000D_
height: 100px;_x000D_
background-color: green;_x000D_
float: left;_x000D_
}_x000D_
_x000D_
article{_x000D_
height: 100px;_x000D_
margin: 0 0 0 50px; /* 50px aside width */_x000D_
background-color: grey;_x000D_
}_x000D_
_x000D_
div{_x000D_
margin: 0 auto;_x000D_
display:block;_x000D_
width: 60px;_x000D_
height: 60px;_x000D_
background-color: blue;_x000D_
color: white;_x000D_
}<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
</head>_x000D_
<body>_x000D_
<aside>_x000D_
</aside>_x000D_
<article> _x000D_
<div>The div</div>_x000D_
</article>_x000D_
</body>_x000D_
</html>Center: Depricated, don't use this!
Use <center></center> tags as a wrap around your <div></div>.
Example:
aside{_x000D_
display:block;_x000D_
background-color:green;_x000D_
width: 50px;_x000D_
height: 100px;_x000D_
float: left;_x000D_
}_x000D_
_x000D_
center{_x000D_
display:block;_x000D_
background-color:grey;_x000D_
height: 100px;_x000D_
margin-left: 50px; /* Width of the aside */_x000D_
}_x000D_
_x000D_
div{_x000D_
display:block; _x000D_
width: 60px; _x000D_
height: 60px; _x000D_
background-color:blue;_x000D_
color: white;_x000D_
}<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
</head>_x000D_
<body>_x000D_
<aside>_x000D_
</aside>_x000D_
<article>_x000D_
<center>_x000D_
<div>The div</div>_x000D_
</center>_x000D_
</article>_x000D_
</body>_x000D_
</html>In most browsers this will work:
div.centre {_x000D_
width: 200px;_x000D_
display: block;_x000D_
background-color: #eee;_x000D_
margin-left: auto;_x000D_
margin-right: auto;_x000D_
}<div class="centre">Some Text</div>In IE6 you will need to add another outer div:
div.layout {_x000D_
text-align: center;_x000D_
}_x000D_
_x000D_
div.centre {_x000D_
text-align: left;_x000D_
width: 200px;_x000D_
background-color: #eee;_x000D_
display: block;_x000D_
margin-left: auto;_x000D_
margin-right: auto;_x000D_
}<div class="layout">_x000D_
<div class="centre">Some Text</div>_x000D_
</div>Using jQuery:
$(document).ready(function() {
$(".myElement").wrap( '<span class="myElement_container_new"></span>' ); // for IE6
$(".myElement_container_new").css({// for IE6
"display" : "block",
"position" : "relative",
"margin" : "0",
"padding" : "0",
"border" : "none",
"background-color" : "transparent",
"clear" : "both",
"text-align" : "center"
});
$(".myElement").css({
"display" : "block",
"position" : "relative",
"max-width" : "75%", // for example
"margin-left" : "auto",
"margin-right" : "auto",
"clear" : "both",
"text-align" : "left"
});
});
or, if you want to center every element with class ".myElement":
$(document).ready(function() {
$(".myElement").each(function() {
$(this).wrap( '<span class="myElement_container_new"></span>' ); // for IE6
$(".myElement_container_new").css({// for IE6
"display" : "block",
"position" : "relative",
"margin" : "0",
"padding" : "0",
"border" : "none",
"background-color" : "transparent",
"clear" : "both",
"text-align" : "center"
});
$(this).css({
"display" : "block",
"position" : "relative",
"max-width" : "75%",
"margin-left" : "auto",
"margin-right" : "auto",
"clear" : "both",
"text-align" : "left"
});
});
});
The title of the question and the content is actually different, so I will post two solutions for that using Flexbox.
I guess Flexbox will replace/add to the current standard solution by the time IE8 and IE9 is completely destroyed ;)
Check the current Browser compatibility table for flexbox
Single element
.container {_x000D_
display: flex;_x000D_
justify-content: center;_x000D_
}<div class="container">_x000D_
<img src="http://placehold.it/100x100">_x000D_
</div>Multiple elements but center only one
Default behaviour is flex-direction: row which will align all the child items in a single line. Setting it to flex-direction: column will help the lines to be stacked.
.container {_x000D_
display: flex;_x000D_
flex-direction: column;_x000D_
}_x000D_
.centered {_x000D_
align-self: center;_x000D_
}<div class="container">_x000D_
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged._x000D_
</p>_x000D_
<div class="centered"><img src="http://placehold.it/100x100"></div>_x000D_
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It_x000D_
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>_x000D_
</div>Add this class to your css file it will work perfectly steps to do:
1) create this first
<div class="center-role-form">
<!--your div (contrent) place here-->
</div>
2) add this to your css
.center-role-form {
width: fit-content;
text-align: center;
margin: 1em auto;
display: table;
}
.center {_x000D_
height: 20px;_x000D_
background-color: blue;_x000D_
}_x000D_
_x000D_
.center>div {_x000D_
margin: auto;_x000D_
background-color: green;_x000D_
width: 200px;_x000D_
}<div class="center">_x000D_
<div>You text</div>_x000D_
</div>.center {
margin-left: auto;
margin-right: auto;
}
Minimum width is not globally supported, but can be implemented using
.divclass {
min-width: 200px;
}
Then you can set your div to be
<div class="center divclass">stuff in here</div>
Usage of margin-left:auto and margin-right:auto may not work in certain situations. Here is a solution what will always work. You specify a required width and than set a left-margin to a half of the remaining width.
<div style="width:80%; margin-left:calc(10%);">
your_html
</div>
You should use position: relative and text-align: center on the parent element and then display: inline-block on the child element you want to center. This is a simple CSS design pattern that will work across all major browsers. Here is an example below or check out the CodePen Example.
p {_x000D_
text-align: left;_x000D_
}_x000D_
.container {_x000D_
position: relative;_x000D_
display: block;_x000D_
text-align: center;_x000D_
}_x000D_
/* Style your object */_x000D_
_x000D_
.object {_x000D_
padding: 10px;_x000D_
color: #ffffff;_x000D_
background-color: #556270;_x000D_
}_x000D_
.centerthis {_x000D_
display: inline-block;_x000D_
}<div class="container">_x000D_
_x000D_
<p>Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius An Maius Septentrionarius Plas Inproportionabilit Constantinopolis Particularisticus.</p>_x000D_
_x000D_
<span class="object centerthis">Something Centered</span>_x000D_
_x000D_
<p>Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius.</p>_x000D_
</div>If you know the width of your div and it is fixed, you can use the following css:
margin-left: calc(50% - 'half-of-your-div-width');
where 'half-of-your-div-width' should be (obviously) the half of the width of your div.
I use div and span tags together with css properties such as block, cross-browser inline-block and text-align center, see my simple example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.block{display:block;}
.text-center{text-align:center;}
.border-dashed-black{border:1px dashed black;}
.inline-block{
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
.border-solid-black{border:1px solid black;}
.text-left{text-align:left;}
</style>
</head>
<body>
<div class="block text-center border-dashed-black">
<span class="block text-center">
<span class="block">
<!-- The Div we want to center set any width as long as it is not more than the container-->
<div class="inline-block text-left border-solid-black" style="width:450px !important;">
jjjjjk
</div>
</span>
</span>
</div>
</body>
</html>
you can use margin: 0 auto on your css instead of margin-left: auto; margin-right: auto;
In your html file you write:
<div class="banner">
Center content
</div>
your css file you write:
.banner {
display: block;
margin: auto;
width: 100px;
height: 50px;
}
works for me.
CSS, HTML:
div.mydiv {width: 200px; margin: 0 auto}<div class="mydiv">_x000D_
_x000D_
I am in the middle_x000D_
_x000D_
</div>Your diagram shows a block level element also (which a div usually is), not an inline one.
Of the top of my head, min-width is supported in FF2+/Safari3+/IE7+. Can be done for IE6 using hackety CSS, or a simple bit of JS.
The best response to this question is to use margin-auto but for using it you must know the width of your div in px or %.
CSS code:
div{
width:30%;
margin-left:auto;
margin-right:auto;
}
margin: 0 auto;
as ck has said, min-width is not supported by all browsers
If old browsers are not an issue, use HTML5 / CSS3. If they are, apply polyfills and still use HTML5 / CSS3. I assume that your div has no margins or paddings here, but they are relatively easy to account for. The code follows.
.centered {
position: relative;
left: 50%;
transform: translateX(-50%);
}
What this does is:
div relative to its container;div's left boundary at 50% of its container width horizontally;div's own width.It is easy to imagine this process to confirm that the div would be horizontally centered eventually. As a bonus, you can center vertically at no additional cost:
.centered-vertically {
position: relative;
top: 50%;
transform: translateY(-50%);
}
The advantage of this approach is that you don't have to do any counterintuitive stuff, such as considering your div a text of sorts, wrapping it in a (often semantically useless) additional container, or giving it a fixed width, which is not always possible.
Don't forget vendor prefixes for transform if needed.
Here I add proper answer
You can use this snippet code and customize. Here I use 2 child block.This should show center of the page. You can use one or multiple blocks.
<html>
<head>
<style>
#parent {
width: 100%;
border: solid 1px #aaa;
text-align: center;
font-size: 20px;
letter-spacing: 35px;
white-space: nowrap;
line-height: 12px;
overflow: hidden;
}
.child {
width: 100px;
height: 100px;
border: solid 1px #ccc;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="mydiv" id="parent">
<div class="child">
Block 1
</div>
<div class="child">
Block 2
</div>
</div>
</body>
</html>
Please use the below code and your div will be in the center.
.class-name {
display:block;
margin:0 auto;
}
Source: Stackoverflow.com