Does someone knows how can I vertically align a div inside a td ? I tried to use vertical-align:middle, but without any results.
There are already some other questions with the same problem, but they don't provide a solution for my case.
In my below example I need to vertically align the div with class thread inside the td. This need to be done without using magic numbers (fixed height or line-height values) and I couldn't find a solution for doing this...
JSFIDDLE
HTML:
<table>
<tbody>
<td class="thread-title">
<div class="rating">
<div class="positive_votes">
<span class="bz-icon" title="Upvote this thread">
</span>
</div>
<span class="score">1</span>
<div class="negative_votes ">
<span class="bz-icon" title="Downvote this thread">
</span>
</div>
</div>
<div class="thread">
<span><a class="title ">thhhhhhhhhhhhhhrrrrrrrrrrrrrrrrrrr</a></span>
</div>
</td>
</tbody>
</table>
CSS:
.positive_votes, .negative_votes {
width: 15px;
height: 15px;
background-color:blue;
}
.rating {
margin-right: 5px;
float: left;
}
.thread {
display:inline-block;
}
position: relative;
transform: translateY(-50%);
top: 50%;
Add display:inline-block; and vertical-align:middle; to both divs and remove float: left; from .rating:
.rating {
margin-right: 5px;
display:inline-block;
vertical-align:middle;
}
.thread {
display:inline-block;
vertical-align:middle;
}
https://jsfiddle.net/zg9qtunk/3/
Related
Stuck on a problem where when I enter text in a div with display property set to inline-block. Here's the HTML:
<div class="row" id="section">
<div class="sectionheading">
</div>
<div class="sectionheading">
</div>
<div class="sectionheading">
</div>
<div class="sectionheading" id="sectionheading">
<span>Text</span>
</div>
</div>
CSS:
.sectionheading {
display: inline-block;
width: 6px;
background-color: #df5e5e;
height:35px;
}
#sectionheading {
width: 150px !important;
}
#section {
margin-left:10px;
margin-top: 40px;
}
The problem is with the div having id 'sectionheading'. When I have text in it like in the HTML given it shifts downwards for some reason, however when the div is empty it is aligned properly with the other divs. What's the problem here?
Use vertical-align: top; will solve your issue.
If you are using display: inline-block; you need to set vertical:align property of the div. Because default it's vertical-align value is baseline.
.sectionheading {
background-color: #df5e5e;
display: inline-block;
height: 35px;
vertical-align: top;
width: 6px;
}
Check Fiddle Here.
Try like this: Demo
.sectionheading {
vertical-align:top;
}
Another option for solve this issue..
.sectionheading {
display: inline-block;
width: 6px;
background-color: #df5e5e;
height:35px;
float: left;
margin-right:10px;
}
#sectionheading {
width: 150px !important;
}
#section {
margin-left:10px;
margin-top: 40px;
}
<div class="row" id="section">
<div class="sectionheading">
</div>
<div class="sectionheading">
</div>
<div class="sectionheading">
</div>
<div class="sectionheading" id="sectionheading">
<span>Text</span>
</div>
</div>
The reason why such happens when there is text is because there is a height given by default and with no proper padding height added. You can either add vertical-align: top; or add line-height: 24px; and remove height.
Fiddle : Example
Having a problem vertically centering my span inside my div.
HTML:
<div id="rcontainer" style="width:100px;">
<div id="accinfo" style="height:50px; overflow:hidden;">
<img src="images/default-avatar.png" id="accavatar" />
<span id="inneraccinfo">
Level X <br />
Win/loss X
</span>
</div>
</div>
CSS:
#accavatar {
resize:both;
width:50px;}
#accinfo {
position: relative;
left: 10px;
top: 10px;
display: inline;}
#inneraccinfo {
font-family:my_fat_font;
color: white;}
Fiddle, with about the same structure:
http://jsfiddle.net/6jnte8da/1/
I want to vertically align the span element incasing "level x" & "win/loss X", with respect to the image.
In advance - Thank you
Just use display:table-cell in conjunction with display:table for parent. Fiddle here: http://jsfiddle.net/6jnte8da/2/
Remove all style tags from HTML
<div id="rcontainer">
<div id="accinfo">
<img src="images/default-avatar.png" id="accavatar" />
<span id="inneraccinfo">
Level X <br />
Win/loss X
</span>
</div>
</div>
And try something like this for css
#rcontainer {
height: 50px;
}
#accavatar {
width:50px;
}
#accinfo {
height: 50px;
display: inline-block;
width: 200px;
}
#accinfo img {
vertical-align: top;
}
#inneraccinfo {
font-family:my_fat_font;
color: white;
display:inline-block;
}
I have DIVs with some text and a button in them. I need to:
align the button on the bottom of DIV
align the text on the top of DIV
Here is an image of what I want it to look like:
The code I have:
HTML:
<div class="table">
<div class="cell">
<p>Some text</p>
<a type="button" class="btn" href="#">Button</a>
</div>
<div class="cell">
<p>The big one text</p>
<a type="button" class="btn" href="#">Button</a>
</div>
<div class="cell">
<p>Some small text</p>
<a type="button" class="btn" href="#">Button</a>
</div>
</div>
CSS:
.table {
display: table;
}
.cell {
float: none;
display: table-cell;
height: auto;
}
.cell .btn {
vertical-align: bottom;
}
Any ideas how to do this?
.table {
display: table;
}
.cell {
display: table-cell;
height: auto;
border:1px solid black;
padding-bottom:40px;
position:relative;
}
.cell .btn {
vertical-align: bottom;
position:absolute;
bottom:0px;
}
DEMO
try this. adjust the padding according to your button height
DEMO
.cell p{
vertical-align: top;
display:inline;
}
.cell .btn {
display:block;
vertical-align: bottom;
}
Note:i have added two display properties along with vertical-alignment,because p always starts in a newline,so inorder for the vertcal-alignment:top to work you need to add display:inline for the p element
DEMO
try this one,this is the simplest just copy and paste replace your code
use:
.cell .btn {
position: absolute;
bottom: 0px;
}
UPDATE: The answers have got me close, but they still don't align vertically as the text div is larger, how can I make them both the same height and therefore align?
I would like to have two DIVs next to each other, one containing an image and one containing text, both sitting in a container DIV.
The image should be 15% of the width of the container div, with the text using the remaining 85%
The image and text should be aligned vertically within their respective DIVs, so it looks like they are aligned with each other.
I've tried to work this out but can't seem to do it! Can anyone help?
#picture {
float: left;
width: 15%;
line-height: auto;
}
#text {
width: auto;
padding-left: 16%;
line-height: auto;
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
}
#text p {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
and
<div id="quotes">
<div id="picture">
<img style="width: 100%; vertical-align: middle" src="tom.jpg" >
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Here's a fiddle with your code in it: http://jsfiddle.net/hQ6Vw/1/
The only changes I made was to assign matching top/bottom margins to the img and p tags. I think that will give you the effect you're looking for.
If you use float and verticl-align, those two won'nt work together.
Float extract itself from regular flow and go slide on one side or the other on top of next line right after any content within the regular flow.
Vertical-align works:
in betweem inline-boxes (inline-block-level element or displayed so with display:inline-block;)
inside td or it's CSS default display : display:table-cell;
here jsfiddle #TXChetG updated
Using display:inline-block; http://jsfiddle.net/GCyrillus/hQ6Vw/2/
Using display:table/* table-cell*/;
http://jsfiddle.net/GCyrillus/hQ6Vw/3/
This should get you close:
<div>
<div style="background: grey; width: 15%; float:left"></div>
<div style="background: blue; width: 85%; float:left"></div>
</div>
Replace the grey background div with your image and the blue with your text.
Check this out
HTML:
<section>
<div id="one"></div>
<div id="two"></div>
</section>
CSS:
section {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
div#one {
width: 15%;
height: 200px;
background: red;
float: left;
}
div#two {
margin-left: 15%;
height: 200px;
background: black;
}
Is this what you mean?
html
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
css
.container {
clear: both;
}
.images {
width: 15%;
float: left;
vertical-align: text-top;
}
.text {
width: 85%;
float: right;
vertical-align:text-top;
}
Why not just set the #text p display to display: inline or display:block; or use margins to align them?
<div id="quotes">
<div id="picture">
<img src="tom.jpg" />
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Display the container div as table and the text and image divs as table-cell to make them the same heights. You can then centre the image vertically through vertical-align:middle.
#quotes {
display:table;
}
#picture {
width: 15%;
display:table-cell;
vertical-align: middle;
}
#text {
display:table-cell;
width:85%;
padding-left: 16%;
}
#picture img {
width: 100%;
}
http://jsfiddle.net/X3WsV/1/
I have the following HTML:
<div class="mega_parent">
<div class="parent">
<div class="holder">
<span class="holder_under">Left heading</span>
<div class="holder_options">
<span class="holder_options_1">Option 1</span>
<span class="holder_options_2">Option 2</span>
<span class="holder_options_3">Option 3</span>
</div>
</div>
</div>
</div>
and the following CSS:
.holder {
background-color: blue;
padding: 10px;
}
.holder_under {
padding-left: 10px;
font-size: 16px;
color: #999;
}
.parent {
float: left;
margin-right: 20px;
width: 600px;
}
.mega_parent {
background-color: blue;
margin: 130px auto;
min-height: 320px;
height: 100% auto;
overflow: auto;
width: 940px;
padding: 0px 10px;
}
Question:
How do I make the div with the class holder_options align in the same line as the span with the class .holder_under?
Here's what it looks like currently in jsFiddle.
Div's are by default block level elements. Please read up more about block level elements here.
"Block level elements - Their most significant characteristic is that they typically are
formatted with a line break before and after the element (thereby
creating a stand-alone block of content)."
Set it to display:inline-block;
.holder_options {
display:inline-block;
}
Working jsFiddle here.
by default div's are display:block which is set to take 100% of the width. set it to display:inline or display:inline-block to take only what it needs and allow others to fit on the same line
u need inline-block
This is where the magic value inline-block for the display property comes into play. Basically, it’s a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings etc
css
.holder {
background-color: blue;
padding: 10px;
}
.holder_under {
padding-left: 10px;
font-size: 16px;
color: #999;
}
.holder_options {
display:inline-block;
}
html
<div class="holder">
<span class="holder_under">Left heading</span>
<div class="holder_options">
<span class="holder_options_1">Option 1</span> </div>
.holder_options
{
float:right;
}
Here's the JS Bin: http://jsbin.com/idilim/1/
Yes the structure you have laid out is not done well however, just float .holder_options to the left:
.holder_options {
float: left;
}
As Morpheus stated in a comment, style="display: inline;" should do it.
<div class="holder">
<span class="holder_under">Left heading</span>
<div class="holder_options" style="display: inline;">
<span class="holder_options_1">Option 1</span>
</div>
</div>