I'm trying to center the inner divs by setting the margins on the outer div, but it does not appear to be working.
So my HTML looks like this:
<div id="outer">
<div class="inner"><span>H</span></div>
<div class="inner"><span>I</span></div>
</div>
My CSS looks something like this:
#outer {
display: block;
width: 100%;
margin: 0 auto; /* This is not working for some reason */
}
#outer .inner {
display: inline-block; /* Used to put the boxes side by side */
margin: 0 0 0 1%;
width: 5%;
}
I can't figured out what is wrong with my CSS code. Even if I set a fixed width, it still won't center.
Just use text-align: center css property in your #outer div to center .inner divs (as they are displayed as inline elements).
#outer { text-align:center; }
#outer .inner { display: inline-block;width: 5%; }
<div id="outer">
<div class="inner"><span>H</span></div>
<div class="inner"><span>I</span></div>
</div>
Related
is there a way to do margin-right auto (always move div to right). I tried margin-right: auto; and margin: 0 0 0 auto; didn't work.
Margin parameter work like this :
margin : top, right, bottom, and left,
So it should be: 0 auto 0 0
by the way flex is also a very nice position :
.one{
display: flex;
width:100%;
justify-content: flex-end;
background-color:red;
}
.element-right{
width: 50px;
background-color: blue;
}
<div class="one">
<div class="element-right">BOX</div>
</div>
You can achieve that as well with a little help from a wrapper over your original div:
HTML:
<div class="right-wrapper">
<div class="right">
</div>
</div>
CSS:
.right-wrapper {
text-align: right;
}
.right {
display: inline-block;
}
This works because the contents of the parent .right-wrapper are set to behave like text while keeping their block behavior (display: inline-block). This causes the child div to react to parent's text-align: right.
In some cases you might find that the child div is inheriting a width property and is full width. It's useful to then set child's width property to auto in case the child element is supposed to be some sort of a button or other, smaller element aligned to the right side.
.right {
display: inline-block;
width: auto;
}
You can use margin-left: 100%. If you want to define other margin values, you can use the shorthand margin: 0 0 0 100%, for example. This will "push" the div to the right of the container.
You could always use the text-align method on divs
.parent{
text-align: right
}
.child{
display: inline-block
}
.parent {
width: 100%;
height: 40px;
background: #000;
display: flex;
justify-content: flex-end;
}
.parent .child {
width: 100px;
height: 100%;
background: blue;
}
<div class="parent">
<div class="child"></div>
</div>
Given this basic 3 columns layout,
.wrapper {
display: table;
width: 100%;
}
.wrapper>div {
display: table-cell;
}
.center {
padding-top: 3em;
}
<div class="wrapper">
<div class="left">uno</div>
<div class="center">dos</div>
<div class="right">tres</div>
</div>
When adding padding-top to the .center div, the others also display it. How do I add a padding-top to the center div alone?
Its easy: Try to do the following:
.wrapper {
display: table;
width: 100%;
}
.wrapper>div {
display: table-cell;
vertical-align:top; // Add this line :)
}
.center {
padding-top: 3em;
}
When you use display: table-cell in a div, the div will align vertically to the center... so by doing vertical-align:top you will force all the divs align vertically to the top and then the center div will assume the padding as you desire.
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;
}
I'm trying to align some tiles that I have in my website to center. There are 4 tiles with two in the first row and other two in the second. I'm trying to align these DIVs to the center of the page but I'm not able to.
I've added margin: 0 auto; to the parent DIV and also included position: relative and display: inline-block; as suggested by some other posts but not able to align in yet.
Below is the code that I'm writing:
<div class="parent">
<div class="child">Child</div>
<div class="child">Child</div>
<div class="clear"></div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="clear"></div>
</div>
The CSS Code:
.parent{
width: 1000px;
margin: 0 auto;
position: relative;
}
.child{
float: left;
margin: 2px auto;
width: 25%;
background-color: green;
position: relative;
display: inline-block;
}
.clear{
clear: both;
}
And the jsfiddle: http://jsfiddle.net/wj1a2fnj/4/
After all this I'm not able to align the child DIVs to the center. I'm a novice in CSS and figuring my way now. Any help will be greatly appreciated.
Thank you.
You need to remove float: left; from the .child and add text-align: center; to the .parent
div to center inline-block child elements inside it.
Try this - DEMO
.parent{
width: 1000px;
margin: 0 auto;
text-align: center;
font-size:0; /* to remove the white space between inline-block elements */
}
.child{
display: inline-block;
margin: 2px auto;
width: 25%;
background-color: green;
font-size:16px; /* reset the font size (i.e 1em = 16px) */
}
You could also add a <br> tag instead of <div> tag after the second child - http://jsfiddle.net/p6rkw5ax/
Add text-align: center; to your parent div and it works
.parent{
width: 1000px;
margin: 0 auto;
text-align: center;
font-size: 0; --> To make the space void in between divs
}
ADD
.child{
<--float: left;--> REMOVED
font-size: 14px;
display: inline-block; --> To make the div float next to each other
}
WORKING EXAMPLE
You could do something like this...
<div align="center">
<div>whatever you want to align</div>
</div>
Just make sure whatever you are aligning to center has a relative css position and not absolute or anything else...
DEMO
.parent{
width: 1000px;
margin: 0 auto;
list-style: none;
position:relative;
text-align: center;
vertical-align: middle;
}
.child{
display: inline-block;
margin: 2px auto;
width: 25%;
background-color: green;
}
text-align: center works
Just add it to your CSS for child class.
http://jsfiddle.net/wj1a2fnj/6/
EDIT:
The reason why its not aligning the parent div to the center is because you are using floats.
Remove the float and adjust margin: 0 auto and you will get what you want;
Updated Fiddle: http://jsfiddle.net/wj1a2fnj/19/
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/