Consider following:
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>
Left div has less height than the right div. Can I set the left div vertically in the middle of the right div? I can not set the margin-top because the height varies.
Here's the jsfiddle link:
http://jsfiddle.net/k8972/
Hi now used to display inline-block and give to vertical-align and remove to float
as like this
.wrap{
overflow:hidden;
border:1px solid red;
width:250px;
display:table;
}
.left{
width:100px;
height:50px;
background:yellow;
display:inline-block;
vertical-align:middle;
}
.right{
width:100px;
height:100px;
background:brown;
display:inline-block;
vertical-align:middle;
}
live demo http://jsfiddle.net/k8972/2/
You can use display: table-cell and vertical-align: middle; but it won't work on IE7 or less.
Couple of methods mentioned here
http://phrogz.net/css/vertical-align/index.html
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
i have a pink colored container and inside it there are 2 divs, red and green placed side by side with display:inline-block; rule in css.i need both this divs to take 50% width so that they appear as a single div.but when i set the width to 50% the green jumps below red div.when i set width to 49% it jumps to same line but there are gaps in between which is not what i want, some body help.
i need them to stick togather in a line as if they appear as a single div.
i'll put my code pen link here...
http://codepen.io/ShamZ/pen/gLXBow
HTML
<div class="container">
<div class="box">
</div>
<div class="box2">
</div>
</div>
css
.container{
width:800px;
height:800px;
background-color:pink;
}
.box{
display:inline-block;
width:50%;
height:50px;
background-color:red;
}
.box2{
display:inline-block;
width:50%;
height:50px;
background-color:green;
}
the Problem with our Code is that HTML detect whitespace between the box elements in the container - and therefor it seems like theres not enough space in the container for 2 Divs with 50% width. - Set them to 48% or even smaller and u will see that they will fit among a line.
One Solution can be:
.container{
width:800px;
height:800px;
background-color:pink;
display:inline-block;
font-size: 0;
}
.box{
display:inline-block;
width:50%;
height:50px;
background-color:red;
}
.box2{
display:inline-block;
width:50%;
height:50px;
background-color:green;
}
<div class="container">
<div class="box">
</div>
<div class="box2">
</div>
</div>
and then set another font-size in child elements
This is a known issue where white-space between inline-block elements cause margins to appear. Take a look at this example (fixed)
.container{
width:800px;
height:800px;
background-color:pink;
}
.box{
display:inline-block;
width:50%;
height:50px;
background-color:red;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.box:nth-of-type(2) {
background-color: green;
}
<div class="container">
<div class="box">
</div><div class="box">
</div>
</div>
Switch to floats, ala http://codepen.io/davewallace/pen/aBVQLN
inline-block can result in odd spacings that may need further workarounds.
When using floats you can achieve the desired effect simply, you may need to investigate the use of 'clearfix' on containers wrapping your floated elements.
Add font-size:0 to parent element .container
.container{
width:800px;
height:800px;
background-color:pink;
font-size:0;
}
.box{
display:inline-block;
width:50%;
height:50px;
background-color:red;
}
.box2{
display:inline-block;
width:50%;
height:50px;
background-color:green;
}
<div class="container">
<div class="box">
</div>
<div class="box2">
</div>
</div>
There's some questions about this but I haven't found a good answer. Been looking for a couple hours now.
Here's my jsfiddle:
http://jsfiddle.net/foreyez/Mr2ER/
I have some simple markup:
<div class='container'>
<div class='box1'></div>
<div class='box2'></div>
<div class='box3'></div>
</div>
and CSS:
.container {
white-space:nowrap;
}
.box1 {
width:200px;
height:200px;
background:red;
float:left;
}
.box2 {
width:200px;
height:200px;
background:green;
float:left;
}
.box3 {
width:200px;
height:200px;
background:blue;
float:left;
}
Yet the boxes still wrap when the window is small enough. Any suggestions?
Note: I want to keep this float:left, so no inline-block solutions please.
If you add width:600px; to the .container it will force them to stay inline.
Here's your updated JSFiddle
Give #container a width at least as large as the child divs:
.container {
white-space:nowrap;
width:9999px;
}
jsFiddle example
So I made this example here: http://jsfiddle.net/cRmCc/2/ and I was wondering what would be the best way to vertically and horizontally align nested divs inside a parent div with out using margin or padding. More preferably the exact center. I'll be using this as a reference and Google isn't that much of a help. Thanks!
HTML
<div class="container1">
<div class="container2">
Some Text
</div>
</div>
CSS
.container1 {
width:200px;
height:200px;
background-color:red;
}
.container2 {
width:100px;
height:100px;
background-color:blue;
}
You can use display:table-cell; and vertical-align:middle; along with text-align:center; and display:inline-block;
Updated Fiddle
.container1 {
width:200px;
height:200px;
background-color:red;
text-align:center;
display:table-cell;
vertical-align:middle;
}
.container2 {
width:100px;
height:100px;
background-color:blue;
display:inline-block;
}
Note: You will need a fallback for older browsers, if supported.
<div id='loadingScreen'> has a width of 0 because of the position:absolute and the positioning isn't working because of it. Adding a width of 100% to <div id='loadingScreen'> doesn't solve the problem.
CSS:
#loadingScreen{
position:relative;
}
.centered{
height:100px;
position:absolute;
top:50%;
margin-top:-50px;
}
HTML:
<div id="loadingScreen">
<div class="centered">
<!--stuff-->
</div>
</div>
.loadingScreen
{
display:table;
}
.centered
{
display:table-cell;
vertical-align:middle;
}
When you do position:absolute, you are effectively placing an object "manually" where you want it to be, meaning it shouldn't automatically align itself.
For normal vertical alignment - try line-height:(div-height); inside your css for .loadingScreen.
If your div is part of a table, try vertical-align:middle; instead.
You can do something like this:
.centered
{
height:200px;
border: 1px solid black;
vertical-align: middle;
display:table-cell;
}
Here's a Demo in JS Bin: http://jsbin.com/ireqoc/1/edit
I have a div containing a span and I want the span to vertically and horizontally align to the center of my div.
Here's the fiddle : http://jsfiddle.net/RhNc2/1/
I've try margin:auto on the span and the vertical-align on the div, but it's not working
EDIT : My div and my span don't have a fixed height, it depends of the content, i've put it fixed on the fiddle just to show you
Add this to the div CSS:
display:table-cell; text-align:center
working fiddle is here: http://jsfiddle.net/sdoking/DCT85/
CSS:
#myDiv {
border:1px solid black;
height:50px;
width:200px;
vertical-align:middle;
display:table-cell;
text-align:center
}
#mySpan {
width:100%;
border:thin blue solid
}
Borders are for clarity :)
Vertical alignment is a tricky business, and I don't know if there's one tried-and-true way. The most reliable technique available in the last couple of years is to use a CSS table layout. The only downside to this approach is that it may not work on outdated browsers. Still, in my experience this is probably the best overall solution. See my example below:
<style type="text/css">
#container {
display:table;
border-collapse:collapse;
height:200px;
width:100%;
border:1px solid #000;
}
#layout {
display:table-row;
}
#content {
display:table-cell;
text-align:center;
vertical-align:middle;
}
</style>
<div id="container">
<div id="layout">
<div id="content">
Hello world!
</div>
</div>
</div>
Here's a jsFiddle: http://jsfiddle.net/aGKfd/2/
There's another technique, but it's not as foolproof as the above technique. It involves two containers, with the outer container's position set to relative and the inner set to absolute. Using absolute positioning on the inner container you can get close, but it requires some tweaking to get it just right:
<style type="text/css">
#vertical{
position:absolute;
top:50%;
left:0;
width:100%;
text-align:center;
}
#container {
position:relative;
height:200px;
border:1px solid #000;
}
</style>
<div id="container">
<div id="vertical">
Hello world!
</div>
</div>
Here's a jsFiddle: http://jsfiddle.net/6SWPe/
use line-height = height:
http://jsfiddle.net/RhNc2/8/
You can also just apply these styles to the containing <div>. The line-height solution assumes you only need one line of text to be centered though.
#myDiv{
border:1px solid black;
height:50px;
width:200px;
text-align:center;
line-height:50px;
}
Here it is
#myDiv{
border:1px solid black;
height:50px;
width:200px;
}
#mySpan{
display:block;
text-align:center;
line-height:50px;
}
And the jsFiddle: http://jsfiddle.net/Simo990/RhNc2/9/
Edit: since your div and span height depends of the content, my solution will not work, because it needs fixed height and only one row of text. Just look for a solution with position:absolute.