I need to vertically align a box with CSS without using display: inline-block. As I don't know the height of my elements I used the way here described (CSS Table Method).
<div style="background-color: black">
<div style="background-color: aqua; display: table; margin: auto;">
<div style="background-color: aliceblue; width: 200px; float: left; display: table-cell; vertical-align: middle;">
<p>A</p>
<p>A</p>
<p>A</p>
</div>
<div style="background-color: green; height: 20px; width: 100px; float: left; display: table-cell; vertical-align: middle;"></div>
<div style="background-color: aliceblue; width: 250px; float: left; display: table-cell; vertical-align: middle;">
<p>B</p>
<p>B</p>
<p>B</p>
<p>B</p>
</div>
</div>
</div>
However, the vertical alignment on this test page has no effect at all. According to the computed CSS of these divs the display value is set to block! How can I make these divs appear in the middle?
erase the float:left from the DIVs - display:table-cell and float:left together makes no sense
Codepen: http://codepen.io/anon/pen/ORrNdW
ADDITION AFTER COMMENT:
Like this: codepen.io/anon/pen/NRxALO ?
I inserted /nested another DIV in each table-cell that contains the smaller elements, and assigned the background-color to the table element itself.
One way, out of many ways, you can achieve this is by setting the parent to position:relative; and its child to position:absolute; top:50%; transform:translateY(-50%);. Although this question has been answered many many times before.
Ok, I finally found the answer. You have to use the flexbox styling (display: flex). Using this method, you can center elements without specifing a height. This page describes how to use it.
Related
Can someone help me with this? I want make this design, But I have problem with position. Here is image
Here is code
> https://plnkr.co/edit/Smyes7rZXVcqq5IugW2o?p=preview
The below skeleton will work for you best.
Set parent div's height and display to table (min-height won't work for you here). You can vertically align contents inside the parent div if you set child div's display to table-cell and vertical-align to middle. The child content will automatically align vertically even if the content height changes.
<div class="container">
<div class="col-sm-6 left">
<div class="inner">
<span>become our partner</span>
contact us
</div>
</div>
<div class="col-sm-6 right">
//right side content
</div>
</div>
.left{
height: 500px;
background: #ccc;
display: table;
}
.inner{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.inner span, .inner a{
display: block;
text-transform: uppercase;
}
I have three columns, but in the center one I can display only limited number of paragraphs.
If I add, for example, 15 paragraphs, only first 11 paragraphs will be displayed. It's like the div have set height parameter. Does anyone know how to fix this?
<div id="left" style="float:left; width:250px;"></div>
<div id="right" style="float:right; width:250px;"></div>
<div id="center" style="margin:0;"></div>
Add float:left; also to your #center element
or if you don't want it floated than: overflow:auto;
An alternative approach would be to use display: table; and display: table-cell; instead:
CSS
#container {
display: table;
width: 100%;
}
.cell {
display: table-cell;
vertical-align: top;
}
.side {
width: 250px;
}
HTML
<div id="container">
<div class="cell side">Left</div>
<div class="cell">Center</div>
<div class="cell side">Right</div>
</div>
I'm assuming these are the building blocks for your layout, with a centered area and sidebars on the left and right. Using table has the benefit that all cells maintain the same height; float can be fickle.
I have the following code;
<div id="first" style="float: left">
</div>
<div id="second">
<div id="1" style="display: inline-block;">
</div>
<div id="2" style="display: inline-block;">
</div>
......
<div id= "n" style="display: inline-block;">
</div>
</div>
The problem is that when the content in #second is taller than the content in #first,
then the child div's in #second start a new line below #first.
I want them to come below the second div only.
One simple way of doing this without having to set any widths or margins is to trigger a block formatting context for #second.
Apply the following CSS:
#second {
border: 1px solid blue;
overflow: auto;
}
See the demo at jsfiddle
For more information about block formatting contexts, see:
http://www.w3.org/TR/CSS2/visuren.html#block-formatting
if you are aware of the maximum width/width of the first div then just apply that width value as margin-left to the second div.
Working Fiddle
Updated: (if you are not aware of the width)
#second{
display: table-cell;
}
Fiddle
Use inline-block instead of float.
try:
#first, #second{
display: inline-block;
vertical-align: top;
}
That will make sure the two are separate as long as they are next to each other, so have to have a width.
EXAMPLE FIDDLE
EDIT
or yes, if you don't know width
#first, #second{
display: table-cell;
}
EXAMPLE FIDDLE 2
I'm trying to center the strings "1","2" and "3" vertically as seen here:
But when I use display: table-cell; vertical-align: middle; for all 3 div's, but then I get his unwanted result:
HTML is
<div id='alldivs'>
<div id='red' class='each_div'>1</div>
<div id='blue' class='each_div'>2</div>
<div id='green' class='each_div'>3</div>
</div>
CSS is
.each_div {
width: 80px;
height: 50px;
text-align: center;
display: table-cell; vertical-align: middle;
}
Demo
How do I keep the 3 div's aligned vertically while keeping vertical alignment within each div?
This is a conceptual misunderstanding. Without a parent element with display:table-row the tables cell will always span over full width, because it will create anonymous table object of table-row and table.
According to W3C Specification article: Tables
Document languages other than HTML may not contain all the elements in the CSS 2.1 table model. In these cases, the "missing" elements must be assumed in order for the table model to work. Any table element will automatically generate necessary anonymous table objects around itself, consisting of at least three nested objects corresponding to a 'table'/'inline-table' element, a 'table-row' element, and a 'table-cell' element. .....
Here is a quirksmode page showing uses of display: table and so on. A image showing the same effect as on this question.
To solve this problem semantically, you have to add an extra element to display as row.
<div id='alldivs'>
<div id='red' class='each_div'>
<div class="cell">1</div>
</div>
<div id='blue' class='each_div'>
<div class="cell">2</div>
</div>
<div id='green' class='each_div'>
<div class="cell">3</div>
</div>
</div>
Then assign relative CSS to them
#alldivs { display: table; }
.each_div {
display: table-row;
}
.cell {
width: 80px;
height: 50px;
display: table-cell;
vertical-align: middle;
border: 1px #000 solid;
}
Demo
I think there's a much simpler way, using line-height:
<div id='alldivs'>
<div id='red' class='each_div'>1</div>
<div id='blue' class='each_div'>2</div>
<div id='green' class='each_div'>3</div>
</div>
.each_div {
width: 80px;
height: 50px;
line-height:50px; // set to the same height as the div
text-align: center;
clear:both;} // add clear both to skip line
See the jsfiddle here and compare with the other answers.
You can wrap each one in another <div> with display: table-row; and it will look as you wish:
HTML:
<div id='alldivs'>
<div class="row">
<div id='red' class='each_div'>1</div>
</div>
<div class="row">
<div id='blue' class='each_div'>2</div>
</div>
<div class="row">
<div id='green' class='each_div'>3</div>
</div>
</div>
CSS:
.each_div {
width: 80px;
height: 50px;
display: table-cell;
vertical-align: middle;
border: 1px #000 solid;
}
.row {
display: table-row;
}
This is because table-* is designed to emulate a table, thus one must follow table structure to get table appearance. In this case you may just want to use a table.
I have found a work-around that works the way you want. If you wish then you can use it:
Change your CSS as:
.each_div {
width: 100%;
height: 50px;
vertical-align: middle;
text-align:center;
background:red;
}
#alldivs{
width:80px;
display:block;
}
Note that I have mentioned width:80px for the parent div alldivs
It gives the output as:
The css property vertical-align: middle does not work in this example.
HTML:
<div>
<span class='twoline'>Two line text</span>
<span class='float'> Float right </span>
</div>
CSS:
.float {
float: right;
}
.twoline {
width: 50px;
display: inline-block;
}
div {
border: solid 1px blue;
vertical-align: middle;
}
The span that is floating on the right is not vertically centered with respect to its containing div. How can I have it vertically centered?
The above code is in this fiddle.
You must wrap your element in a table-cell, within a table using display.
Like this:
<div>
<span class='twoline'>Two line text</span>
<span class='float'>Float right</span>
</div>
and
.float {
display: table-cell;
vertical-align: middle;
text-align: right;
}
.twoline {
width: 50px;
display: table-cell;
}
div {
display: table;
border: solid 1px blue;
width: 500px;
height: 100px;
}
Shown here: http://jsfiddle.net/e8ESb/7/
Vertical align doesn't quite work the way you want it to. See: http://phrogz.net/css/vertical-align/index.html
This isn't pretty, but it WILL do what you want: Vertical align behaves as expected only when used in a table cell.
http://jsfiddle.net/e8ESb/6/
There are other alternatives: You can declare things as tables or table cells within CSS to make them behave as desired, for example. Margins and positioning can sometimes be played with to get the same effect. None of the solutions are terrible pretty, though.
You should set a fixed value to your span's line-height property:
.float, .twoline {
line-height: 100px;
}
The answer given by Matt K works perfectly fine.
However it is important to note one thing -
If the div you are applying it to has absolute positioning, it wont work. For it to work, do this -
<div style="position:absolute; hei...">
<div style="position:relative; display: table-cell; vertical-align:middle; hei...">
<!-- here position MUST be relative, this div acts as a wrapper-->
...
</div>
</div>