For some reason, margin:auto is not working.
HTML
<body>
<div id="background">
<div id="header">
<div id="title">Welcome</div>
</div>
</div>
</body>
CSS
#background {
min-width: 960px;
}
#title {
display: block;
margin: auto;
background-color: blue;
}
This just just draws a blue line across the top of the screen with the word 'Welcome' on the left. Why isn't my margin:auto working?
The correct syntax for horizontally centering via margin is: margin: 0px auto; as this will set the left and right margin to auto. You need to set a width on it if you use this approach, because the width is 100% by default.
Alternatively, you can also use text-align:center if you are just centering text.
Working jsFiddle using text-align:center.
Alternative jsFiddle.. I don't know what style you are trying to achieve.
The #title div will expand to fill its parent, #header, which in turn, expands to fill its own parent, #background, which has a width of at least 960px.
Therefore, #title if full width so it is centered, and by default, the text is left justified (at least in Western European languages).
If you want the #title to have a shrink-to-fit width, you can try display: inline-block.
To center #title horizontally, add text-align: center to its parent container, #header.
For example:
#background {
min-width: 960px;
}
#header {
text-align: center;
}
#title {
display: inline-block;
background-color: beige;
}
Alternatively, you can achieve the same result using display: table:
.ex2 #header {
text-align: left;
}
.ex2 #title {
display: table;
margin: 0 auto;
background-color: beige;
}
See demo at: http://jsfiddle.net/audetwebdesign/kAhnx/
Related
I need to make a website and there is a button which is in the middle horizontally. I can use left 50% or margin-left but when I minimize the window - it isn't in the middle. How do I set the div to be exactly in the middle also when you minimize the window of the browser?
Edit: fixed it by doing as Trix said and adding
.center-div{
margin: 0 auto;
}
If your div has a width value, you may use:
CSS
.center-div{
width: 100px;
margin: 0 auto;
}
But, if not, you may add text-align: center to its parent and display: inline-block; to the centering div itself:
HTML
<div class="parent">
<div class="center-div">
</div>
</div>
CSS
.parent{
text-align: center;
}
.parent .center-div{
display: inline-block;
}
As the title tells you, I want to center a parent div where the parent div retrieves the width of all its child divs.
This is the code I used to retrieve the width of the child divs:
.parent
{
background-color: yellow;
display: inline-block;
font-size: 0;
/*How could I center this div? I used to do: margin-left: auto; margin-right: auto;
however for this I need to assign a fixed width. I want to assign the width of the
content inside the div.*/
}
.child
{
height: 100px;
width: 100px;
border: 1px solid red;
display: inline-block;
}
Source: http://jsfiddle.net/53me4f8e/
How can I center this div?
Centrally align the text of the parent element, in this case, body. .parent is displayed as an inline-block, which means it behaves like an inline element and is therefore centred:
body{
text-align: center;
}
Note, because text-align is inherited, you may want to revert the text alignment back to left (or right, depending on preference) for .parent:
.parent{
text-align: left;
/* Other styles.. */
}
JSFiddle
This should be:
.parent{
display: block;
text-align:center;
}
updated your fiddle
I have a div with width:100%; since I want to fill out the parent container.
I also want to have the contents of the div in its center. I can not find a horizontal-align:center attribute for the divs. How can I configure the div so that its contents are in the center?
I.e if the div is this big:
------------------------------------------------------------------------------------------------------------
Enclosing tags here
in the center
------------------------------------------------------------------------------------------------------------
try this:
div {
margin:0 auto;
}
Try this for fixed width
div.class_name {
width: XXpx;
margin: 0 auto;
text-align: center;
}
Dynamic Height
<div class="container">
<div class="inside">some content</div>
</div>
.container
{
text-align: center;
}
.inside
{
display:inline-block;
}
In HTML
<div style="text-align: center;"> </div>
That all you need for the CSS.
Read about margin: auto trick:
http://bluerobot.com/web/css/center1.html
You could try setting:
margin: auto
I'm not sure if it helps in this case.
div.class {
margin:0 auto;
width: 800px /*as desired*/ ;
}
You must assign width to div that you will want locate to center then right and left margin should get 0 value
{
width: 100px;
margin : 0 auto;
}
This might be what you looking for: padding:0 20%; using a % helps auto adjust the padding depending on how wide the parent div is. You can change 20% to your preferred number.
.div {
width:100%;
padding: 0 20%;
}
You should try text-align:center; to make content of div in center.
I want my <p> element to be at the center of a container <div>, as in perfectly centered -- the top, bottom, left and right margins split the spaces equally.
How can I achieve that?
div {
width: 300px;
height: 100px;
}
p {
position: absolute;
top: auto;
}
<div>
<p>I want this paragraph to be at the center, but it's not.</p>
</div>
You dont need absolute positioning
Use
p {
text-align: center;
line-height: 100px;
}
And adjust at will...
If text exceeds width and goes more than one line
In that case the adjust you can do is to include the display property in your rules as follows;
(I added a background for a better view of the example)
div
{
width:300px;
height:100px;
display: table;
background:#ccddcc;
}
p {
text-align:center;
vertical-align: middle;
display: table-cell;
}
Play with it in this JBin
To get left/right centering, then applying text-align: center to the div and margin: auto to the p.
For vertical positioning you should make sure you understand the different ways of doing so, this is a commonly asked problem: Vertical alignment of elements in a div
♣you should do these steps :
the mother Element should be positioned(for EXP you can give it position:relative;)
the child Element should have positioned "Absolute" and values should set like this: top:0;buttom:0;right:0;left:0; (to be middle vertically)
for the child Element you should set "margin : auto" (to be middle vertically)
the child and mother Element should have "height"and"width" value
for mother Element => text-align:center (to be middle horizontally)
♣♣simply here is the summery of those 5 steps:
.mother_Element {
position : relative;
height : 20%;
width : 5%;
text-align : center
}
.child_Element {
height : 1.2 em;
width : 5%;
margin : auto;
position : absolute;
top:0;
bottom:0;
left:0;
right:0;
}
this is how I do it:
.container {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 100px;
background-color: lightgreen;
}
.paragraph {
width: 250px;
background-color: lightyellow;
}
<div class="container">
<p class="paragraph">I want this paragraph to be at the center, but it's not.</p>
</div>
you can add text-align: center; to the paragraph if you want text alignment to be center
You only need to add text-align: center to your <div>
In your case also remove both styles that you added to your <p>.
Check out the demo here: http://jsfiddle.net/76uGE/3/
Good Luck
Centered and middled content ?
Do it this way :
<table style="width:100%">
<tr>
<td valign="middle" align="center">Table once ruled centering</td>
</tr>
</table>
I fiddled it here
Ha, let me guess .. you want DIVs ..
just make your first outter DIV behave like a table-cell then style it with vertical align:middle;
<div>
<p>I want this paragraph to be at the center, but I can't.</p>
</div>
div {
width:500px;
height:100px;
background-color:aqua;
text-align:center;
/* there it is */
display:table-cell;
vertical-align:middle;
}
jsfiddle.net/9Mk64/
on the p element, add 3 styling rules.
.myCenteredPElement{
margin-left: auto;
margin-right: auto;
text-align: center;
}
This solution works fine for all major browsers, except IE. So keep that in mind.
In this example, basicaly I use positioning, horizontal and vertical transform for the UI element to center it.
.container {
/* set the the position to relative */
position: relative;
width: 30rem;
height: 20rem;
background-color: #2196F3;
}
.paragh {
/* set the the position to absolute */
position: absolute;
/* set the the position of the helper container into the middle of its space */
top: 50%;
left: 50%;
font-size: 30px;
/* make sure padding and margin do not disturb the calculation of the center point */
padding: 0;
margin: 0;
/* using centers for the transform */
transform-origin: center center;
/* calling calc() function for the calculation to move left and up the element from the center point */
transform: translateX(calc((100% / 2) * (-1))) translateY(calc((100% / 2) * (-1)));
}
<div class="container">
<p class="paragh">Text</p>
</div>
I hope this help.
I have a HTML code as;
<div class="left">
<span class="panelTitleTxt">Title text</span>
</div>
My CSS is as follows;
.left {
background-color: #999999;
height: 50px;
width: 24.5%;
}
span.panelTitleTxt {
display: block;
width: 100%;
height: 100%;
}
Now how do I center align the span text inside the div? (Assume that the "left" div after the % conversion gets a px width of 100px)
I tried the standard way of using margin:auto, but that is not working.
Also I want to avoid using text-align:center.
Is there some other way of fixing this?
You are giving the span a 100% width resulting in it expanding to the size of the parent. This means you can’t center-align it, as there is no room to move it.
You could give the span a set width, then add the margin:0 auto again. This would center-align it.
.left
{
background-color: #999999;
height: 50px;
width: 24.5%;
}
span.panelTitleTxt
{
display:block;
width:100px;
height: 100%;
margin: 0 auto;
}
If you know the width of the span you could just stuff in a left margin.
Try this:
.center { text-align: center}
div.center span { display: table; }
Add the "center: class to your .
If you want some spans centered, but not others, replace the "div.center span" in your style sheet to a class (e.g "center-span") and add that class to the span.