I have 2 div: one parent and one child. User can add this div with button click and they set the text value. I want to display these dives in border inline-block(3 items in 1 row, like new tabs in chrome). And I want to display this text in the center of border.
There is css code:
.parentDiv {
width: 300px;
height: 200px;
margin: 5px;
border: solid 1px black;
display: inline-block;
font-size: 24px;
}
.childDiv {
text-align: center;
vertical-align:middle;
}
Here's a jsfiddle to show you a solution: http://jsfiddle.net/nfLu3/
.parentDiv {
...
line-height:200px;
text-align:center;
}
.childDiv {
display:inline-block;
line-height:1;
}
the keys are:
set the line-height of the parent container to its height (200px) and the text-align to center. So some text appears exactly in the middle of your box.
set the child container to be display as inline-block. In this way it's oriented at the text around (it's important!). The text around (I mean the line breaks and spaces before the child container) has a line-height of 200px and the child block has vertical-align:middle, so it will be centered.
there you go
Related
I needed to vertically align an inline-block element and came across an example on the Internet using line-height property.
The code as follows:
HTML
div#line-parent {
display: block;
width: 100%;
height: 100px;
line-height: 100px;
border: 1px dotted #ccc;
background-color: antiquewhite;
text-align: center;
}
div#line-parent:before {
content: "";
display: inline-block;
vertical-align: middle;
}
div.line-child {
display: inline-block;
width: 20%;
line-height: normal;
background-color: brown;
vertical-align: middle;
}
<div id="line-parent">
<div class="line-child">
vertical align using line height
</div>
</div>
However, if the parent (#line-parent) contains only the child (.line-child), then the child is not vertically aligned in middle.
In order to get the child to be vertically aligned in the parent, I either added speudo class :before in the parent (as I did above) or added some text in the parent.
I want to know why we need to add more than elements in order to get those elements vertically aligned? How does that work?
There is a common misconception that vertical-align refers to the position of an inline level element within a parent.
This is not the case.
vertical-align refers to the alignment of multiple inline level elements to each other within such a container.
From the W3 Spec
The inline-level boxes are aligned vertically according to their 'vertical-align' property. In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height.
I would like to create a div (within a main wrapper for a website) to contain 2 div to fill in the previously mentioned div. I have actually done this already....but my problem is that the 2 smaller divs dont align nor stay fixed in the main div. How is this even possible if they are confined to a main div?
Here is what I have done so far and there this issue is present: http://jsbin.com/tifuhute/17/
The text and the map (both with black borders) should be in the red box (which is the main div) and shouldnt move under no circumstances.
The sizing is a little off. (#column1 (300px) + #column2 (900px) = 1200px not 1198). Use box-sizing:border-box; to make it easier
#container {
width:1200px;
...
}
#column1 {
width:300px;
box-sizing:border-box;
...
}
#column2 {
width:900px;
box-sizing:border-box;
...
}
http://jsbin.com/tifuhute/18/
Your divs have fixed width and height. Your container is 1198px wide, while your inner divs sum up 1200px, thus wrapping as they don't fit in their parent's 1198px width.
Give both your divs "display: inline-block". This will make them line up side by side as long as their width is not greater than that of the red box.
#text{
display: inline-block;
width: 30%;
#map{
display:inline-block;
width: 69%;
}
You will want to float the inner divs.
Because div elements display as block they won't follow each other horizontally in-line. Using float will put them next to one another.
Don't forget to account for the border width of each inner element so they fit inside the wrapper. In the below example the larger div has a width of 646px instead of 650px because 4px were used for the right and left border of the inner div's combined.
<div id="wrapper">
<div id="small-div"></div>
<div id="large-div"></div>
</div>
#wrapper{
width: 900px;
height: 300px;
padding: 0;
margin: 0;
border: 1px solid red;
}
#small-div, #large-div{
float: left;
border: 1px solid #000;
}
#small-div{
width: 250px;
height: 300px;
}
#large-div{
width: 646px;
height: 300px;
}
JSFiddle example
I am trying to move the text .col-6 .about to the right of the image but nothing is working.
Here is my code:
http://jsfiddle.net/M4rDD/
CSS
.mainInfo
{
height:500px;
background-color: pink;
}
.col-6 .imagePlaceholder
{
float: left;
width:300px;
height:420px;
margin:30px 0 30px 30px;
background-color: red;
}
.col-6 .about
{
display: block;
margin-left:100px;
padding:1em;
}
try using css parameters such as :
position:absolute
for the objects you need to move, and then values as left:00px and right:00px.
Use position:relative for the main wrapper div.
p.s. i rarely use margin value for div, because it's interpreted on different ways across different browsers.
because the floated red div is taken out of the document flow and although the text surrounds the floated red div, the margin is still calculated against the parent col-6 which has the width of 100% (display:block) of the mainInfo). So you have to set the margin-left larger than the width of the floated red div (which is 300px). In this case you may have to set the margin-left to 400px:
.col-6 .about {
display: block;
margin-left:400px;
padding:1em;
}
I added this answer to show that the margin-left still works. You can also set the margin for the floated red div instead (like JunM posted as a comment).
Here is the updated demo.
I have two rows:
<div>
The first row
</div>
<div>
The <span class="boxed">second</span> row
</div>
The word "second" is in a yellow box with padding:
* { box-sizing: border-box; }
div { border: 1px solid black; }
.boxed {
background: yellow;
padding: 0.5em;
}
As you can see I am using the border-box model. But the yellow box does not. Or does it?
I expected the second row to be as high as the yellow box, but that did not happen. There is no float, no CSS position, but still the yellow box overflows the div. How can I make the second div row contain the yellow box inside of it?
There is a fiddle here: http://jsfiddle.net/lborgman/9xEgA/
Inline boxes are not affected by box-sizing since they are never affected by the width and height properties. When you add padding to inline boxes, all that does is cause their backgrounds to expand, pushing only their left and right edges away from surrounding content, but not their top and bottom edges (since the line height is not altered). That's why it overflows. See sections 10.6.1 and 10.8 of the spec for more details.
If you want to hide the overflow, use overflow: hidden:
div { border: 1px solid black; overflow: hidden; }
Otherwise, if you want to make the second row expand to contain the yellow box, you might be able to make the yellow box display: inline-block without any adverse side-effects:
.boxed {
display: inline-block;
background: yellow;
padding: 0.5em;
}
Try adding display: block to the span. Inline block elements sometimes alter the document flow in strange ways when you do things like add padding to them. See this updated fiddle
You can use display: inline-block property for your .boxed span.
.boxed {
background: yellow;
display: inline-block;
padding: 0.5em;
}
JSFiddle
How can I get the "content" <div> of these two columns to fill the container's entire height?
jsfiddle: http://jsfiddle.net/7m4f7/8/
This is a follow up to this question: Make children divs the height of tallest child.
Here is a similar question, but the solutions don't seem to work.
Make div (height) occupy parent remaining height
Instead of using the display:inline-block, I used floats.
In order to obtain the same height , I used the content div to push the item div through the padding/margin compensation.
The background color of the title and content are now independent. You can changed at will.
The automatic margin between the inline-block elements can be replaced with regular margins applied to the divs at will or if you prefer just take them away.
You get the following:
Fiddle here
markup did not change
Css as follows
.row {
border: 1px solid red;
overflow:hidden;
}
.item {
float:left;
margin-right:4px;
}
.title, .content {
border: 1px solid rgba(0,0,0,0.2);
}
.content {
padding-bottom:1000px;
margin-bottom:-1000px;
background: rgba(0,0,0,0.1);
}
.title {
background-color: rgba(0,0,0,0.2);
}
Not exactly what you asked for, but maybe this is sufficient. When you add vertical-align: top;, the top edges will align nicely
.item {
background: rgba(0,0,0,0.1);
display: inline-block;
vertical-align: top;
}
JSFiddle