live: http://jsfiddle.net/8hAv3/
#main {
width: 100px;
height: 100px;
background-color: red;
}
#sub {
width: 100%;
height: 100%;
background-color: blue;
vertical-align: middle;
}
<div id="main">
<div id="sub">TEXT</div>
</div>
Why in this example vertical-align not working? How can i make it? I dont want use margin, padding and set height in px. Is this possible?
This should work:
#main {
width: 100px;
height: 100px;
background-color: red;
display: table;
}
#sub {
display: table-cell;
height: 100%;
width: 100%;
background-color: blue;
vertical-align: middle;
}
http://jsfiddle.net/8hAv3/2/
if you just want to vertically center text in a fixed height box I would use line-height:100px to do it
you have to use a
display:table-row;
display:table-cell; or
display:table;
along with the vertical-align style, not sure which exact display value it has to be but it needs to be one of the table ones.
You need to use display:table on the main container and display:table-cell on the child. Illustrated here: http://jsfiddle.net/8hAv3/1/
You have to give the element #sub a line height, otherwise the browser doesn't know how high it is to vertically align it.
Just give the div a line-height.
#main {
width: 100px;
height: 100px;
background-color: red;
}
#sub {
width: 100%;
height: 100%;
background-color: blue;
line-height:100px;
}
Fiddle
This solution does not use display:table and display:table-cell as display:table and display:table-cell are not browsers friendly, some older browsers do not support
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 4 years ago.
When a div is next to another larger one in the same container, the smaller one stays at the bottom. I would like it to start from the top, any idea how to do that?
See the example below. I would like the red box to come all the way up, of course without using something like position-relative then just moving it up in px or em
Bonus points if someone can explain where the spacing between my boxes come from since I did not specify any padding or margin ;)
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
background-color: green;
}
<div class=container>
<div class=small></div>
<div class=big></div>
</div>
vertical-align works on elements that are display: inline-block; - so simply add vertical-align: top;
As for the spaces, that's the "whitespace" between your elements, which exists because the divs are on separate lines. There's a handful of solutions to this, one of which is simply keep the closing </div> and opening <div> immediately adjacent (like so: </div><div>), which I have implemented in the snippet below.
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
vertical-align: top;
background-color: green;
}
<div class=container>
<div class=small></div><div class=big></div>
</div>
The best solution to problems of container and child item layout is CSS Flexbox. Note that I added display: flex and align-items: flex-start to your container. That second one has the magic which aligns all child items to the top. Follow the link above for a very helpful reference. Also note that your spacing issue is fixed.
.container {
background-color:blue;
width: 700px;
height: auto;
display: flex;
align-items: flex-start;
}
.small {
width:200px;
height:200px;
display:inline-block;
background-color:red;
}
.big {
height: 400px;
width:400px;
display:inline-block;
background-color:green;
}
<div class=container>
<div class=small></div>
<div class=big></div>
</div>
There may be a better solution out there, but if you float each element left it will give you your desired output.
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
background-color: green;
}
.left{
float: left
}
<div class="container left">
<div class="small left"></div>
<div class="big left"></div>
</div>
Just add vertical-align: top; to both elements.
Also the space is added because both elements are inline-block and are considered as text elements, you can fix that by setting font-size to 0 to the parent element, like that:
.container{
font-size: 0;
}
And don't forget to set the right font size to the child elements if you're going to add some text to them, example :
.small, .big{
font-size: 16px;
}
I have an inline div abc and another inline div def. abc's width is 100px. How can I let def appear on the right while def's width is its parent's width minus 100px?
I cannot do width:100%; since def would appears next line.
https://jsfiddle.net/h7k87vwx/
<div class="abc">abc</div>
<div class="def">def</div>
<div class="ghi">ghi</div>
.abc {
display:inline-block;
background-color:lightblue;
width: 100px;
}
.def {
display:inline-block;
background-color: lightyellow;
width: 200px;
}
HTML
<div class="abc">abc</div><div class="def">def</div><div class="ghi">ghi</div>
CSS
.def {
display: inline-block;
background-color: lightyellow;
width: calc(100% - 100px);
}
DEMO: https://jsfiddle.net/h7k87vwx/6/
Divs are lined up together to eliminate rendered white space. For an explanation see my answer here:
inline-block boxes not fitting in their container
Here's an old trick that was commonly used in holy grail layout:
.abc {
float: left;
background-color:lightblue;
width: 100px;
}
.def {
padding-left: 100px; /* margin-left also applies */
background-color: lightyellow;
}
Check out the fiddle.
Inline-block elements will have an empty space between them, one way to address this is to give them a negative margin. That will make it not be placed below. Another detail would be to keep an empty space in between the different values and the operator with calc() otherwise it will not work :
https://jsfiddle.net/t0ecucgw/
.abc {
display: inline-block;
background-color: lightblue;
width: 100px;
}
.def {
display: inline-block;
background-color: blue;
width: calc(100% - 100px);
margin-left: -4px;
}
I think you want to do:
.def {
width: calc(100% - 100px)
}
.def {
float:right;
background-color: lightyellow;
width: 200px;
}
link
This is what Ihave so far:
http://jsfiddle.net/yisera/2aVpD/
There's a div I need to center vertically inside the .jumbotron-special container.
I tried using display: table; on he parent element and then use display:table-cell on the child element (the one with the H1 and H2) but so far no luck and I've ran out of ideas. I do not want to use absolute positioning since This needs to be responsive, and as the resolution goes smaller, the layout goes astray.
Any ideas how can I center it to the jumbotron parent div?
You can use the following code the contents of the div .jumbotron-special
add the following properties to the class
display:flex;
justify-content:center;
align-items:center;
Working Code:JSFIDDLE
More on Flex Box
Read More on Flex here
Try this:
#yourdiv {position:absolute; top:50%; height:800px; margin-top:-400px; }
Where margin-top is negative half of height.
Or, another effective method with 2 divs:
<div id="controller-div">
<div id="your-div">
Content here
</div>
</div>
Where, again with margin-bottom negative half of height:
#controller-div {float:left; height:50%; margin-bottom:-120px;}
#your-div {clear:both; height:240px; position:relative;}
This here also works fine (you just missed to add height:100%)
.container-text{
color: #fff;
text-shadow: #333 3px 3px;
display: table;
width: 100%;
height: 100%;
}
.inner-container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Here's another option that has a bit more support than flexbox.
Updated Fiddle here.
body{
width: 100%;
height: 100%;
}
.full-jumbotron{
font-size: 10em !important;
margin-top: -70px;
height: 100vh;
background: #333;
min-height: 100%;
max-height: 100%;
}
.container-text{
color: #fff;
text-shadow: #333 3px 3px;
height: 100%;
display: table;
width:100%;
}
.inner-container {
display: table-cell;
vertical-align: middle;
width:100%;
}
the title pretty much sums it up. I have the following code:
<div class="container">
<p>Hello world</p>
</div>
And CSS:
.container{
width: 100%;
height: 50px;
background-color: lightblue;
vertical-align: middle; /* Why you no work!?!? */
}
But the text is not vertically aligning in the div. I'm clearly missing something here or don't understand a certain concept. Anybody tell me what's happening?
Thanks!
if you have single line text add this to your css.
.container > p{
line-height:50px;
}
To use vertical-align: middle, you need to use display: inline-block.
Your code will change to this:
.container{
display: inline-block; /* This is the line you need to introduce */
width: 100%;
height: 50px;
background-color: lightblue;
vertical-align: middle;
}
You can take a look at the demo.
Update
Using display: table for .container and display: table-cell for .container p makes it work.
Updated demo
.container{
display: table;
width: 100%;
height: 200px;
background-color: lightblue;
vertical-align: middle;
}
.container p {
display: table-cell;
vertical-align: middle;
}
Vertical alignment in CSS is not as straightforward as horizontal alignment.
Depending on your case and the content you need to apply one technique or another.
You can check this link for different techniques:
http://www.vanseodesign.com/css/vertical-centering/
In short, vertical-align: center; is not going to work in your case
Add to your container the display property as follows:
.container{
width: 100%;
height: 50px;
background-color: lightblue;
display:inline-block;
vertical-align: middle;
}
What would be the correct method to vertically center any content in a defined width/height div.
In the example there are two contents with different heights, what is the best way to center vertically both using the class .content . (and it works for every browser and without the solution of table-cell)
Have some solutions on mind, but would like to know other ideas, one is using position:absolute; top:0; bottom: 0; and margin auto.
I have researched this a little and from what I have found you have four options:
Version 1: Parent div with display as table-cell
If you do not mind using the display:table-cell on your parent div, you can use of the following options:
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:table-cell;
vertical-align:middle;
}
Live DEMO
Version 2: Parent div with display block and content display table-cell
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:block;
}
.content {
height: 100px;
width: 100px;
display:table-cell;
vertical-align:middle;
}
Live DEMO
Version 3: Parent div floating and content div as display table-cell
.area{
background: red;
margin:10px;
text-align: center;
display:block;
float: left;
}
.content {
display:table-cell;
vertical-align:middle;
height: 100px;
width: 100px;
}
Live DEMO
Version 4: Parent div position relative with content position absolute
The only problem that I have had with this version is that it seems you will have to create the css for every specific implementation. The reason for this is the content div needs to have the set height that your text will fill and the margin-top will be figured off of that. This issue can be seen in the demo. You can get it to work for every scenario manually by changing the height % of your content div and multiplying it by -.5 to get your margin-top value.
.area{
position:relative;
display:block;
height:100px;
width:100px;
border:1px solid black;
background:red;
margin:10px;
}
.content {
position:absolute;
top:50%;
height:50%;
width:100px;
margin-top:-25%;
text-align:center;
}
Live DEMO
This could also be done using display: flex with only a few lines of code. Here is an example:
.container {
width: 100px;
height: 100px;
display: flex;
align-items: center;
}
Live Demo
I found this solution in this article
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
It work like a charm if the height of element is not fixed.
Simple trick to vertically center the content of the div is to set the line height to the same as height:
<div>this is some line of text!</div>
div {
width: 400px
height: 50px;
line-height: 50px;
}
but this is works only for one line of text!
Best approach is with div as container and a span with the value in it:
.cont {
width: 100px;
height: 30px;
display: table;
}
.val {
display: table-cell;
vertical-align: middle;
}
<div class="cont">
<span class="val">CZECH REPUBLIC, 24532 PRAGUE, Sesame Street 123</span>
</div>
I would say to add a paragraph with a period in it
and style it like so:
<p class="center">.</p>
<style>
.center {font-size: 0px; margin-bottom: anyPercentage%;}
</style>
You may need to toy around with the percentages to get it right
margin: all_four_margin
by providing 50% to all_four_margin will place the element at the center
style="margin: 50%"
you can apply it for following too
margin: top right bottom left
margin: top right&left bottom
margin: top&bottom right&left
by giving appropriate % we get the element wherever we want.