Vertical align 3 divs with inline-block - html

I can't make vertical align all 3 divs inside this li. I have tried inside a div too, but nothing. What can I do?
<li style="list-style:none;border-bottom:1px solid white;height:60px;background-color:blue;padding-left:5%;padding-right:5%">
<div style="max-width:39%;min-width:39%;display:inline-block;;vertical-align:middle;text-align:right">
Equipo 1
</div>
<div style="max-width:19%;min-width:19%;display:inline-block;vertical-align:middle;text-align:center">
18/05<br>12:30
</div>
<div style="max-width: 38%;min-width: 38%;display:inline-block;vertical-align:middle">
Equipo 2
</div>
</li>
Demo
Thanks

You need one of the inline-box to fit the height of parent, so others will vertical-align aside it.
You may use a pseudo element to generate this element wich will be used as reference to vertical-align: DEMO
li:before {
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
<edit> playground pen for line-height</edit>

Related

A href tag with display block and text-align fills the width

I have this simple HTML:
<a style="display:block;text-align:right" href="link.com">Test Link</a>
I want to place a link to the far right of a parent DIV. However, I tried the above code but it leads the link to fill all the space meaning it's clickable across the whole width of the div.
The only ways to avoid this are to give a fixed width to the link or to wrap the link in another DIV. Is there any other way? Or to float the link but it will break the layout
You can use a float for 'floating' it to the right side of your div.
<a style="float:right" href="link.com">Test Link</a>
See this fiddle:
http://jsfiddle.net/wstmrtgz/
JSFiddle example
I've used display:inline-block and float:
.parent {
display:inline-block;
width:100%;
}
.link {
display:inline-block;
float:right;
text-align:right;
}
EDIT: Having seen your comment about not being able to use floats, you can also do this using display:inline-block and fixed widths.
float will fix this
dont forget the clear the float !
<div style="width: 200px; background-color: red;">
<a style="float:right;" href="link.com">Test Link</a>
<div style="clear:both;"></div>
</div
see the difference with and without the clear in the following fiddles!
With clear
http://jsfiddle.net/j9q8jgvm/
without clear
http://jsfiddle.net/j9q8jgvm/

float vs. inline-block changes margin and parent height

So I have been trying to wrap my mind around this and cant figure it out why.
Note: Margin and padding is 0.
The 1st example is
<div> <!-- Gray Box -->
<div> <!-- Purple Box -->
</div>
</div>
I have two images - One is float, the other is inline-block.
The height of the div is shown by the gray color.
float: left;
display: inline-block;
The 2nd example is
<div>
<ul>
<a href = "#">
<li>
<img src = "...">
</li>
</a>
</ul>
</div>
Again, left and inline-block do different things
float: left;
display: inline-block;
Bottom Line
Any suggestions beside the question is welcome.
I don't know why margin / padding is changing and why div size matters by float and display. Thanks
There are 2 problems here.
1) Like someone mentioned in the comments, inline block takes space into account, meaning on the parent div you should have:
font-size:0;
2) Floating takes the element out of the document flow, meaning the parent will expand only past the last non floated child element. To fix this you should put a clearfix class in your css and add it to the parent of the floated element(s).
.clearfix::after{
content:'';
display:block;
clear:both;
}
So once you've done this your first example should look like this:
<div class="clearfix"> <!-- Gray Box -->
<div style="float:left"> <!-- Purple Box -->
</div>
</div>
Now the gray box should expand past the purple box;
As a matter of consistency i don't think you should mix inline-block with floating. One, it won't work on the same element and 2, they are designed for different things.

Convert a div within a div to inline

I'm trying to convert a div element within a div to inline but its not working as expected.
Code:
HTML
<div id="price-results">
<div id="price"><div>Unit Price</div><div>5</div></div>
<div id="qty"><div>Quantity</div><div>2</div></div>
<div id="total"><div>TotalPrice</div><div>10</div></div>
</div>
CSS
#price,#qty{
display:inline
}
JSFiddle
I agree with the comment before.
Apart form that, your CSS needs to target the inside the container like this:
#price div,
#qty div,
#total div{
display:inline
}
… see this fixed jsFiddle.
Some other notes on your HTML + CSS:
you should consider using classes instead of IDs
You could also
target the elements by a single descendant rule like this (jsFiddle)
#price-results > div div {
display:inline
}
#price-results div{
display:inline
}
Update your css like below
#price, #qty{
display:inline-block;
}
Why dont you use float:left instead of display:inline
Here is the demo
Why nesting so many divs unnecessarilly. Its not compulsary to include every element in div. This works fine :-
<div id="price-results">
<div id="price">Unit Price 5</div>
<div id="qty">Quantity 2</div>
<div id="total">TotalPrice 10</div>
</div>
http://jsfiddle.net/qqTDq/2/
DIVs are block-level elements by default. I would switch the inner-DIVs to SPANs, which are inline by default:
<div id="price-results">
<div id="price"><span>Unit Price</span> <span>5</span></div>
<div id="qty"><span>Quantity</span> <span>2</span></div>
<div id="total"><span>TotalPrice</span> <span>10</span></div>
</div>
If your intention is to align the numbers then I would switch to a table.
*,div{
padding:0;
margin:0;
display:inline;
}
#price,#qty{
display:inline;
border:1px solid red;
}

CSS: Align N divs horizontally in a wrapper

How can I achieved aligning of N contiguous divs horizontally with a wrapper whose width is 'auto'?
like:
.boxes{ width:200px;height:200px;float:left; }
<div id="wrapper" style="width:auto;">
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
. . .
</div>
I tried applying display:inline; and display:inline-block; on wrapper but boxes goes into new y after it reaches the browsers/display width?
But setting document's width into fixed will solve the issue but its not what I want.
Also I can easily achieved this using tables but I don't want to do it because my code will look messy and will be hard for me to maintain.
Add
#wrapper
{
white-space: nowrap;
}
and on your boxes class: change float:left to display:inline-block;
FIDDLE
This will keep your boxes from wrapping.

Can you relativlely or absolutely position items in a display:table-cell?

I have a link that I want to always be at the bottom right of the cell it is in. Right now the link is in a < p > element. I tried doing both absolutely and relative positioning but I can get the effect I am looking for.
I have a row with 4 cells, when attempting to apply the absolute position it takes the element to the very last cell on the right... instead of just placing it within the cell it is in. I tried various methods but not sure if I am sure tired or trying to do the impossible.
I am very new to css tables so I could be thinking about this all wrong.
Here is an example:
http://jsfiddle.net/56H5x/1/
The "Learn more" link to the very right should be at the bottom right of the first cell.
Thanks in advance.
While setting position:absolute on child element <p> set position:relative on parent element <div> having <p> element.
So the child element will be relative to its parent element.
EDITED:
Working JS Fiddle
in Chrome, Safari, Opera and IE
But not compatible in Firefox, because Firefox does not obey position:relative on display:table-cell elements.
See the reference:
Edited: Sorry..!! Missed it :). As said by ahsaan, Add position relative to .layout-cell and modify your HTML as below.
.layout-cell {
display: table-cell;
vertical-align: top;
position: relative;
}
.layout-cell div{
position:absolute;
bottom:0;
right:0;
}
<div class="layout-cell columnBody-wrapper curvedBottom">
<p>Column 3</p>
<div><a class="button button" href="#">Learn More</a></div>
</div>
Expanding on Ahsan Rathod's answer to solve this issue in firefox wrap your content inside a div and set your properties on this div rather than the div set as display table-cell
.cell-div {display:table-cell}
.relative-div {position:relative; width:100%}
.absolute-el {position:absolute}
<div class="cell-div">
<div class="relative-div">
<div class="absolute-el">
<img ... >
</div>
</div>
</div>