It hasn't been long since I started learning this.
Please understand even if the English translation is not smooth.
When I studied 'margin: auto' before, I was curious about the content of 'horizontal alignment is possible, but why not vertical alignment.
I found out that the reason was that when I set the specification, I set it as 'the most basic format to be placed in the middle of the street without the top and bottom margins'.
When I gave 'display: flex' to the parent element and 'margin: auto' to the child element, I saw that it became horizontal and vertical center alignment, not horizontal center alignment as before.
If the parent element is 'display: flex' and the child element is 'margin: auto', does it take precedence to be aligned up, down, left, and right to the parent element, rather than to the existing specification?
I wonder if this is the characteristic of the flexbox.
Thank you.
<style>
.wrap{
background-color: tan;
height: 500px;
display: flex;
}
.testArea{
background-color: seashell;
width: 300px;
height: 300px;
margin: auto;
}
</style>
<body>
<div class="wrap">
<div class="testArea">
'margin: auto' test
</div>
</div>
</body>
Related
Just curious:
I have a very simple webpage. I am toying with css files to make it look different.
Especially various divs:
<div align="center">
Apparently, this align="center" cannot, should not, be put in the css file.
I can set the width, background, text style etc.
Why is align not allowed in css?
Because align= is an HTML attribute (an old one) and doesn't have anything to do with CSS.
CSS properties for centering things are different based on the display property of the element being centered.
display: block elements are centered using a left and right margin set to auto. Note that a width must be supplied or it won’t work.
display: inline-block elements are centered by having the element’s parent set to text-align: center (which will center all inline and inline-block children).
/* block level element */
.aaa {
width: 50px;
height: 50px;
margin: 0 auto; /* this centers with width */
background: red;
}
<div class="aaa"></div>
and
/* inline-block or inline elements */
.parent {
text-align: center;
}
<div class="parent">
<h3>I’m a title that’s centered</h3>
</div>
There is also flexbox, but given the nature of your question it’s probably too confusing for you right now.
In CSS, you can align something by placing it inside a div. Then you have to use "text-align" in CSS. Here's an example
<html>
<div id="center">
<p>I'm in the center</p>
</div>
<style>
#center{
text-align:center;
}
</style>
</html>
That's all you have to do! (hope this helped)
Situation
html:
<div class="container">
<div class="parent">
<div class="child">x</div>
</div>
</div>
css:
.container {
display: table;
}
.parent {
display: table-cell;
position: relative;
}
.child {
position: absolute;
right: 0;
}
What I expect:
the .child should be positioned to the right edge of .parent. Works in Chrome.
What I get in Firefox:
the .child is positioned to the right edge of the closest "non static" parent which is has not display: table-cell.
Fiddle
http://jsfiddle.net/SYG5k/2
Question
Why does display: table-cell influence the positioning of child elements, or, why is position: relative ignored on table-cell elements? Can I work around this if I rely on table-cell?
You need to put position: relative; in your parent.
So in the code in your question add position: relative; to .container
Or in your jsfiddle add position: relative; to .parent
.parent {
height: 150px;
width: 450px;
display: table;
margin-top: 400px;
background: #bbb;
position:relative;
}
Related : Firefox ignores absolute positioning in table cells and Positioning context on table-cell element in Firefox
About your questioning 'why' : It's no more a 'block' level element. It's a table-cell so positioning will behave in a different way (in this case, with firefox).
See this to understand deeper about 'tables' behaviors
http://jsfiddle.net/SYG5k/12
Add a wrapper to your absolute element and make it relative, so you will have something like table-cell > relative wrapper > absolute element
http://jsfiddle.net/SYG5k/13/
<div class="rel">
a
<div class="absolute">x</div>
</div>
.foo, .rel {
position: relative;
}
This is a work around I can't explain why it doesn't work normally. Perhaps someone else will answer that for you
Edit : my mistake the wrapper is supposed to wrap everything in the cell, it's what I originally wanted to code, more of a typo. I updated the fiddle above
A work around may be to use an inner div with a width and height of 100%, and set that to position:relative;
HTML:
<div class="parent">
<div class="cell foo">
<div class="cellInner">
a
<div class="absolute">x</div>
</div>
</div>
CSS:
.cellInner{
position:relative;
width:100%;
height:100%;
}
Updated JS Fiddle: http://jsfiddle.net/SYG5k/11/
I was adding a popup menu that appears on each row of the table as the user mouses over it when I ran into this FF problem. Based on the very useful info above, I ended up putting a div wrapper inside the table cell in each row where I wanted my absolutely positioned popover menu to located, and set its display property to relative. My JS then adds the absolutely position menu inside the div as each row is rolled - it has to be a child of the the relatively positioned div, of course. Note that the div will shrink-wrap the td's content rather than filling the td as I expected, but no matter, you then have a relative context, and you can use top and left on the absolutely positioned child element to locate it exactly where you want it with respect to the table cell.
I have 2 columns of divs (left and right) contained in the parent div. I want the parent div height automatically adjusts when either left or right div height expand. The problem I have now is that the height of parent div just expands when the left expand, it does not work for the right. I have height:auto for all divs.
Are there anyone have solution?
you can do this by float for example
<div class="parent" style="float:left">
<div class="child" style="float:left"></div>
<div class="child" style="float:left"></div>
</div>
You are probably using float to move the right div to the right side. Floats do not automatically adjust the parents height, you must add the following code right before the end of the parent div.
<br style="clear:both;" />
This will mark the end of all floats on the same level.
You are probably floating your divs to keep them next to each other. By doing so, you 'remove these divs from the flow', i.e. the parent does not take them as content anymore.
You can 'by-pass' this effect by giving overflow: hidden to the parent or by adding a clear div.
Example w/ overflow: http://jsfiddle.net/BramVanroy/LJTGh/
Important CSS:
#wrapper {
height: auto;
width: 77%;
margin: 20px auto;
overflow: hidden; /*THIS IS IMPORTANT */
border: 1px solid;
}
OR
Example w/ clear: http://jsfiddle.net/BramVanroy/LJTGh/1/
Important CSS:
.clear {clear: both;}
The first option needs a line more of CSS, the second one a line more of HTML and a line more of CSS.
I have two divs. These two divs are orientated as two vertical columns next to each other. Instead of pre-determining the height of the divs via css I want to have it grow dynamically with the content I put into it. Which is simple enough for one div but my problem is that I want the div on the left with background color green to grow to the same height of the div on the right . There is always going to be more content in the right than in left.
Assuming the elements are after body. Give 100% to the body, and all the div
body, #div1, #div2 { height: 100%; }
If they are not, then you have to either fix the height of the parent or chain 100% height all the way to the body again.
#parent { height: 800px; }
#div1,#div2 { height: 100%; }
Enclose those divs in a parent div, and set their height to 100%.
You simply need a three-column (X)HTML + CSS Layout.
It's here
Let insert a parent div (container of those two adjacent divs)
add a property 'display: flex;' to the parent div
.parent{
display: flex;
}
.child1, .child2{
padding: 10px;
border: 1px solid gray;
}
<body>
<div class="parent">
<div class="child1">
CHILD 1 AREA<br />
CHILD 1 AREA
</div>
<div class="child2">
CHILD 2 AREA
</div>
</div>
</body>
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Make outer div be automaticly the same height as its floating content
I feel like I'm missing something very simple here...
We have a simple setup: a parent div that contains a child div.
I want to:
make the parent resize its height based on the child
align the child to the right edge of the parent instead of the default left.
Using float:right will cause the parent to no longer resize correctly and the child to 'jump out' of the parent.
I've tried using align: right and text-align: right but so far no dice.
HTML:
<div id="parent"> <p>parent</p>
<div class="child"> <p>child</p> </div>
<div class="child right"> <p>child2</p> </div>
</div>
CSS:
div{ padding: 15px; margin: 5px; }
p{ padding: 0; margin: 0; }
#parent{
background-color: orange;
width: 500px;
}
.child{
background-color: grey;
height: 200px;
width: 100px;
}
.right{ float: right; } // note: as the commenters suggested I should also be using a float:left on the other child.
Result:
What I want:
Any suggestions on what I could change either with #parent or .right to make child2 align to the right properly?
EDIT
The best fix I found for this is just using display:table on the parent. Though I haven't tested this in IE it fixes the issue in the browsers I care for and avoids using the un-intuitive overflow:hidden method discussed in the comments.
Even better: set margin-left of the child to auto.
Try floating the contents and adding overflow: hidden to the parent. It's counter-intuitive but worked for me with a similar issue.
EDIT: Also float the first child to the left.