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;
}
Related
I have this code, which aligns two images to left and right side of the page with space between:
.center {
width: 100%;
display: table;
}
.leftk {
display: table-cell;
}
.rightk {
display: table-cell;
text-align: right;
vertical-align: middle;
}
<div class="center">
<div class="leftk">
<img src="http://loremflickr.com/300/200" />
</div>
<div class="rightk">
<img src="http://loremflickr.com/400/100" />
</div>
</div>
<span>Text</span>
I tried to do the same with inline-block, but I am unable to align vertically right image to center. Can you please show me a quick example to how to get same result with inline-block?
Edit: If page size is smaller than image width, I want to display them under each other.
Here is how you do it with inline block:
jsFiddle
.center {
font-size: 0; /*remove white space*/
text-align: justify;
}
.center:after {
content: "";
display: inline-block;
width: 100%;
}
.leftk,
.rightk {
font-size: 16px;
display: inline-block;
vertical-align: middle;
}
<div class="center">
<div class="leftk">
<img src="//dummyimage.com/200x200" />
</div>
<div class="rightk">
<img src="//dummyimage.com/100x100" />
</div>
</div>
you can use css3 flexbox instead,
use display:flex instead of display:table
add justify-content:space-between;
it's works fine.
.center {
width: 100%;
display: flex;
justify-content:space-between;
align-items:center;
}
.leftk>img {
width:100px;
height:100px;
}
.rightk>img {
width:50px;
height:50px;
}
<div class="center">
<div class="leftk" style="display: table-cell;">
<img src="https://i.stack.imgur.com/wwy2w.jpg"/>
</div>
<div class="rightk">
<img src="https://i.stack.imgur.com/wwy2w.jpg"/>
</div>
</div>
<span>Text</span>
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/
I am trying to display an image next to two lines of text, which are centered. I have attached an example, and you will see from it that the image is to the left of the text, whereas I am trying to center the image to be on the left side of the text, and have a perfectly centered image/text.
CSS:
.center-class{
text-align:center;
}
.righty img{
max-width: 100px;
float:left;
}
.vid-open{
}
HMTL:
<section class="">
<div class="row pull-down">
<div class="center-class">
<div class="righty">
<img src="http://www.psdgraphics.com/file/white-egg.jpg" >
<h2>This is a header.</h2>
<h5 class="vid-open">some text some text some text<span class="icon-right-left-01-011" ></span></h5>
</div>
</div>
</div>
</section>
SEE DEMO
Simply wrap the text in a div and display it inline-block:
.center-class {
text-align: center;
}
.righty > * {
display: inline-block;
vertical-align: middle;
}
.righty img {
max-width: 100px;
}
<section class="power-of-egg">
<div class="row pull-down">
<div class="center-class">
<div class="righty">
<img src="http://www.psdgraphics.com/file/white-egg.jpg">
<div class="con">
<h2>This is an egg.</h2>
<h5 class="vid-open">eggs are very nutritious<span class="icon-right-left-01-011" ></span></h5>
</div>
</div>
</div>
</div>
</section>
Updated Codepen
Well, this will center the entire block:
.center-class{
text-align:center;
}
.righty img{
max-width: 100px;
float:left;
}
.vid-open{
}
.righty {
width: 300px;
margin: 0 auto;
}
The problem is that you've got your image inside of a div and div is a block-level element, which means it will expand to be the full width of its parent element.
If you take the image out of the div and make the div that contains the text have:
display:inline-block;
That div will shrink down to be only as wide as its content.
Here's your updated code: http://codepen.io/anon/pen/LNNJRQ
To horizontally center an element you can use display: block; and margin: auto;. There may be a better approach but this is the css I used to have the image in the center and the text to the right of it:
.righty > .con {
position: absolute;
top:0;
left: 55%;
}
.righty img {
display: block;
vertical-align: middle;
margin: auto;
max-width: 100px;
}
Note: the position of the class .con will vary based on screen size.
Here is the updated codepen.
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;
}