I would expect that the following html document results in a red square vertically centered within a yellow square:
<html>
<body>
<div style="width:200px;height:200px;background-color:yellow">
<div style="width:100px;height:100px;background-color:red;vertical-align:middle">
</div>
</div>
</body>
</html>
But it results in one that is aligned to the top of its parent div.
fiddle
What am I doing wrong? Why isn't vertical-align:middle working?
The vertical-align property affects the vertical positioning inside a line box of the boxes generated by an inline-level element. Here are more details!
<div style="display: table-cell; width:200px;height:200px;background-color:yellow; vertical-align:middle">
<div style="width:100px;height:100px;background-color:red;">
</div>
</div>
jsFiddle here
Related
How would you position elements in a relatively positioned div, and keep them the same distance apart without going out side of the box? I have a relatively positioned div and inside of it is a div(nameTabs) that spans 100% of the width. Inside of that div is taskstabtext, and tasksaddbox. Tasks tab text is positioned where it is and stays there. Button does not. What would be the cleanest way of positioning the two in a flexbox responsive div? Thanks
<html>
<body>
<div id="box" style="display inline:block; position:relative; left:10%; background-color:red;">
<div>
<div class="nameTabs tasksTab">
<div class="tasksTabText">
<p class="tasksBtnText">Name</p>
</div>
<div class="tasksAddBox">
<p class="tasksAddBtn">Last</p>
</div>
</div>
</div>
</div>
</body>
</html>
LINK - https://jsfiddle.net/9rqd9ot9/15/
I figured it out. For anyone with a similar issue, just use the justify-content:space-between;rule. It seperates the two and then you can set their margins from the edge.
LINK- https://jsfiddle.net/9rqd9ot9/38/
#align_text_center{
height:100%;
display:flex;
}
#aligned_text_h1{
margin:auto;
}
<html>
<body>
<div id="Container1">
<div id="align_text_center">
<h1 id="aligned_text_h1"></h1>
</div>
</div>
<div id="Container2">
<div id="align_text_center">
<h1 id="aligned_text_h1"></h1>
</div>
</div>
</body>
</html>
Welcome! I got again a bit problem while positioning the texts to it's position. I have a h1 element in the center of container1,container2 id's.
I want to align a second(and later a third) text below the first h1 element. I can't say it, so I made an interactive image about it. :(
Thank you for help! :)
I draw an interactive image,click here.
Place all the elements you want to position in the same div, and then position that div, rather than positioning each element separately.
jsFiddle: http://jsfiddle.net/2CRZP/
I want to put the grey box in the middle of the screen using vertical-align:middle or something (CSS).
<div class="container-fluid">
<div class="hero-unit">
<h1>Test</h1>
<p>stackoverflow</p>
<p>
<div class="row-fluid">
<div class="span2">BASE CSS</div>
</div>
</p>
</div>
</div>
http://jsfiddle.net/2CRZP/2/
You have to put this:
.container-fluid {
position:absolute;
top:50%;
margin-top:-160px;
}
In the margin-top you have the half of the height div in negative. (If you edit it)
And vertical-align:middle its only for TD tables. ;)
You mean the green box ?! I don't see any gray box
If you want to use vertical-align with divs, try the display:table-cell;
http://phrogz.net/css/vertical-align/
There is a strange issue in this simple html structure. Here is the html code
<body>
<div class='DatePicker' style="display: inline-block">
<div id="dayDiv" class='DayDiv BorderMe'>
<div id='upArrowDivs' class="BorderMe" style='display: inline-block; height:10%;width:100%;'>
<div class='UpArrowDiv BorderMe'>
</div>
<div class='UpArrowDiv BorderMe'>
</div>
</div>
</div>
</div>
</body>
Here the two innermost divs are displaying outside of its parent div which has id "upArrowDivs". Here is the JsFiddle link where you can see whats going on in StyleSheet.
Add this rule to .UpArrowDiv
vertical-align: top;
see the fiddle
Add this on your css file
#upArrowDivs{overflow:hidden;}
Here is the Solution.
Addition to CSS:
#upArrowDivs{overflow:auto;}
You need to add an overflow for the same.
Hope this helps.
Here are the options
1) Increase your height of "upArrowDivs"
2) Set Padding=0 for "upArrowDivs" and margin=0 to innermost divs
<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>
</body>
</html>
Why isnt the background color showing up in between those 2 divs?
When you float elements you should provide the width of the floated elements. Otherwise you may encounter unexpected behaviors accross different browsers.
Check this tutorial, there is good info on floating in css. [link is dead]
Basically, if you provide an overflow:hidden; to the container div and provide width to the floated elements, your problem will be solved.
<div style="overflow: hidden;">
<div style="float:left; width: 300px;">Some text</div>
<div style="float:right; width: 300px;">Some text</div>
</div>
Similarly, you can add another div wherever you want to normalize the flow ike this:
<div>
<div style="float:left; width: 300px;">Some text</div>
<div style="float:right; width: 300px;">Some text</div>
<div style="clear:both;"></div>
<div>This div will be at the same place
as if the previous elements are not floated</div>
</div>
Both will work :)
EDIT
Another method which I use frequently in these days is to float the first element and set a margin-left to the following element. For instance:
<div>
<div style="float: left; width: 300px;">Some text</div>
<div style="margin-left: 300px;">Some text</div>
<div style="clear: both;"></div>
</div>
The advantage of this method is that the following element (the second div in this case) does not need a fixed width. Plus, you may skip the third div (clear: both;). It's optional. I just add it in case that the floated div is longer in height than the second div since if you don't add it the parent div will always get the height of the second div.
Just set the container div to overflow: hidden;.
If you set elements to float they won't be in the normal 'flow' of the document anymore.
div { background: #ccc; overflow: hidden; }
And you didn't even made a freehand circle ;)
A floating element doesn't affect the size of the parent, unless the parent specifically contain the children using the overflow style.
Your outer div has the same background colors as the child divs, but the height of the parent is zero, so you don't see its background.
It's because both the divs are floated so the containing divhas no height. If you were to add a third child div whic wasn't a float, give it a height of 0 and clear:both you should see the background colour appear.
The white space you are showing is a body part and you set the background color to the div but not in the body. That is the reason the body part is empty.
To color the empty part you should add following code:
<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
body{
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>
</body>
</html>
You can change the body background color by changing the background color in body style.