Hi all on my page here: http://www.gamingonlinux.com/sales/ i want to align text in the added, price, savings and provider to the top, how would I go about that?
Here is the html for the columns:
<div class="row">
<div class="left">
{:screenshot} {:info}
</div>
<div class="date-column">
{:date}
</div>
<div class="price-column">
{:price}
</div>
<div class="middle">
{:savings}
</div>
<div class="right">
{:provider}
</div>
</div>
And their css:
.left
{
display: table-cell;
padding: 14px;
}
.price-column
{
display: table-cell;
padding: 14px;
width: 150px;
}
.date-column
{
display: table-cell;
padding: 14px;
width: 150px;
}
.middle
{
display: table-cell;
width: 75px;
padding: 14px;
}
.right
{
display: table-cell;
width: 155px;
padding: 14px;
}
Inside the "left" div the screenshot and name are inside floated left and right spans.
Just like on a regular table cell you can use vertical-align:top; to do the alignment.
You just have to add float: left; to your css (.left class) like this
.left
{
display: table-cell;
padding: 14px;
float: left;
}
Easy fix:
.row > div {
vertical-align: top;
}
If I understand your problem try this code. vertical-align is good choice:
display: table-cell;
padding: 10px;
width: 150px;
text-align: center;
vertical-align: top;
More other options for vertical-align is:
Related
I am trying to align span elements which are adjacent to a floating element.
Here is the fiddle
.heading {
background-color: tomato;
}
.heading::after {
content: "";
display: block;
clear: both;
}
.heading > * {
display: inline-block;
vertical-align: middle;
color: beige;
padding: 10px;
font-family: Calibri;
}
.button {
float: right;
background-color: firebrick;
font-family: Tahoma;
}
<div class="heading"> <span> some icon here</span>
<!--
--><span>some text here</span>
<div class="button">Go</div>
</div>
I am okay to change the HTML.
Some considerations: (Added after seeing below answers)
Font size and height of the each child elements are different.
If I use display: table-cell, the child elements width are stretching in the parent container. (I need to just align the child elements vertically)
PS: I am not looking for display: flex solution.
I would love to go with the display: table-cell; solution but if it's just one line than you can use line-height here. (Just not to complicate the process using display: table-cell; as there are certain limitations such as you cannot use margin and stuff)
.heading {
background-color: tomato;
line-height: 40px;
}
.button {
float: right;
padding: 0 10px;
background-color: firebrick;
}
Demo (line-height solution)
So basically what am doing is getting rid of your custom padding for the button and using a line-height instead. If you think you can have more than one line, than making both the sections as display: table-cell; will make much more sense.
As you commented a case where you have different font-size which doesn't make much sense to me, so a solution for that is to use display: table-cell; and tweak your markup a bit
Demo 2 (display: table-cell; solution)
<div class="heading">
<div>
<span> some icon here</span>
<span>some text here</span>
</div>
<div>
<div class="button">Go</div>
</div>
</div>
.heading {
background-color: tomato;
line-height: 40px;
}
.heading > div {
display: table-cell;
vertical-align: middle;
}
.heading > div:first-child {
width: 100%;
}
.heading span {
display: inline-block;
vertical-align: top;
}
.heading span:first-child {
font-size: 30px;
}
.button {
padding: 0 10px;
background-color: firebrick;
}
Add this in to your css:
.heading span {
line-height: 34px;
}
I think you try to display: table-cell property
as like this
.heading {
background-color: tomato;
display: table;
width:100%;
}
/* clear fix */
.heading::after {
content:"";
display: block;
clear: both;
}
.heading > * {
display: table-cell;
vertical-align: middle;
color: beige;
}
.button {
float: right;
padding: 10px;
background-color: firebrick;
}
/* my attempt to align */
.heading::before {
content:"";
height: 100%;
width: 0px;
}
<div class="heading"> <span> some icon here</span>
<span>some text here</span>
<div class="button">Go</div>
</div>
Try
position: relative;
top: 50%;
transform: translateY(-50%);
I would suggest using a padding and make sure the height of the button is set.
.heading .mytext {
height: 20px;
float: left;
padding-bottom: 10px;
padding-top: 10px;
}
.button {
float: right;
padding: 10px;
height: 20px;
background-color: firebrick;
}
with html
<div class="heading">
<div class="mytext">
<span> some icon here</span>
<span>some text here</span>
</div>
<div class="button">Go</div>
</div>
See: http://jsfiddle.net/w7vngc43/20/
I modified Mr.Alien's solution of display: table-cell without using line-height. Here is the code:
HTML:
<div class="heading">
<div class="left"> <span class="left-one"> some icon here</span>
<span class="left-two">some text here</span>
</div>
<div class="right">
<button class="button-cancel">Cancel</button>
<button class="button-go">Go</button>
</div>
</div>
CSS
.heading {
background-color: tomato;
}
.heading > div {
display: table-cell;
vertical-align: middle;
}
.left {
width: 100%;
}
.left span {
display: inline-block;
vertical-align: middle;
}
.left-one {
font-size: 30px;
}
button {
padding: 10px 15px;
background-color: firebrick;
border: none;
margin: 0;
}
.right {
white-space: nowrap;
}
Working Fiddle
I need three boxes centered and ordered horizontally. Right now I have the centered but only vertically:
Here is the CSS for the box:
.box {
margin-left: auto;
margin-right: auto;
background-color: #9FDCED;
display: block;
height: 400px;
width: 500px;
}
Any help would be greatly appreciated.
Give the .box a display: inline-block and vertical-align: top to make them be aligned next to eachother. If you surround it with a .container <div> that gets text-align: center the inline content gets horizontally centered.
.container {
text-align: center;
}
.box {
background-color: #9FDCED;
display: inline-block;
height: 50px;
width: 50px;
vertical-align: top;
}
.box--high {
height: 75px;
}
<div class="container">
<div class="box"></div>
<div class="box box--high"></div>
<div class="box"></div>
</div>
A great resource for horizontal and vertical centering using CSS is https://css-tricks.com/centering-css-complete-guide/
.box1 {
display: table;
margin: 0 auto;
}
.box {
background-color: #9FDCED;
display: inline-block;
height: 200px;
width: 200px;
}
<div class="box1">
<div class="box" style="background:#cc0000;"></div>
<div class="box" style="background:#cceeff;"></div>
<div class="box" style="background:#eeccff;"></div>
</div>
Just add a float:left; to the .box class. Like this
.box {
margin: 5px;
background-color: #9FDCED;
display: block;
height: 100px;
width: 100px;
padding: 5px;
float: left;
}
Working JSFiddle http://jsfiddle.net/wcvgs1zb/
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 8 years ago.
I have HTML and CSS below :
.lpanel{
text-align: center;
height: 50px;
}
.logo{
display: inline-block;
font-size: 25px;
}
.slogan{
display: inline-block;
vertical-align: middle;
line-height: 50px;
}
<div class="lpanel">
<div class="logo">LOGO HERE</div>
<div class="slogan">SLOGAN IS HERE</div>
</div>
I know can using display:table for .lpanel and display:table-cell for .slogan to vertical middle this slogan div but I can't do this because when I add display:table for .lpanel then 2 class .logo and .slogan not align center.
You can see picture :
How to fix this ?
Thanks you so much.
add vertical align to both the elements
.lpanel {
text-align: center;
height: 50px;
}
.logo {
display: inline-block;
font-size: 25px;
vertical-align: middle;
border: 1px solid red;
}
.slogan {
display: inline-block;
border: 1px solid red;
vertical-align: middle;
}
<div class="lpanel">
<div class="logo">LOGO HERE</div>
<div class="slogan">SLOGAN IS HERE</div>
</div>
try this example..
.lpanel {
text-align: center;
height: 50px;
}
.lpanel div {
vertical-align: middle;
}
.logo {
display: inline-block;
font-size: 25px;
}
.slogan {
display: inline-block;
vertical-align: middle;
line-height: 50px;
}
<div class="lpanel">
<div class="logo">LOGO HERE</div>
<div class="slogan">SLOGAN IS HERE</div>
</div>
.lpanel{
margin-top:50px;
text-align: center;
height: 50px;
vertical-align: middle;
line-height: 50px;
}
.logo{
display: inline-block;
font-size: 100px;
}
.slogan{
display: inline-block;
float: top;
}
<div class="lpanel">
<div class="logo">LOGO HERE</div>
<div class="slogan">SLOGAN IS HERE</div>
</div>
I have this code and the text is properly centered.
HTML
<div class="holder">
<img src="http://placehold.it/100x150/" style="float: left;" />
some text
</div>
CSS
.holder {
border: 1px solid red;
padding: 10px;
width: 300px;
display: table;
}
a {
display: table-cell;
vertical-align: middle;
}
img {
width: 100px;
}
http://jsfiddle.net/2P8Yj/1/
How can I make the text aligned to left, next to the image?
Add a width to your a:
a {
display: table-cell;
vertical-align: middle;
width:200px;
}
DEMO HERE
Try this http://jsfiddle.net/2P8Yj/18/
I have added the display: table to body the css is as follows
body{display:table}
.holder { border: 1px solid red; padding: 10px; width: 300px;display: table-row;}
a { display: table-cell;
vertical-align: middle; }
img { width: 100px;}
Instead of body you can have one more div above it.
Set your anchor to 100% and add some padding if needed:
a {
display: table-cell;
vertical-align: middle;
width: 100%;
padding-left: 15px;
}
Demo: http://jsfiddle.net/2P8Yj/20/
Try this JsFiddle: JsFiddle
This are the changes in your CSS, notice the height I have added to the .holder and the line-height to your a:
.holder {
border: 1px solid red;
padding: 10px;
width: 300px;
height:150px;
display: block;
}
a {
line-height:150px;
padding-left:20px;
}
img {
width: 100px;
}
You could put img and a each in a cell to create a "proper" table:
HTML:
<div class="holder">
<div class="cell">
<img src="http://placehold.it/100x150/" style="float: left;" />
</div>
<div class="cell">
some text
</div>
</div>
CSS:
.holder {
border: 1px solid red;
padding: 10px;
width: 300px;
display: table;
}
.cell {
display:table-cell;
vertical-align: middle;
text-align:left;
}
.cell:nth-child(1) {
width:105px; /*just to show, better to use padding for second cell*/
}
img {
width: 100px;
}
http://jsfiddle.net/2P8Yj/13/
Not sure if changing the display: table-cell; to display: inline-block; is ok in your situation.
But you can accomplish the same effect with this:
a {
display: inline-block;
vertical-align: middle;
}
img {
width: 100px;
display: inline-block;
vertical-align: middle;
}
Demo
You could add position:relative and left:-80px to your text CSS.
EXAMPLE
flaot:left; might solve your problem.
I am trying to simply align two elements vertically, they are inside a div. I have several images that all have different heights.
HTML
<div class="companyBox">
<img src="http://dummyimage.com/145x150/555555/000000&text=image" />
<div class="showPlans">
<p>Show Plans</p>
</div>
</div>
CSS
.companyBox {
height: 250px;
background-color: #999;
text-align: center;
}
.companyBox img {
vertical-align: middle;
}
.companyBox .showPlans {
vertical-align: middle;
}
Here is a http://jsfiddle.net/hQab5/
Thank you for any help, I don't understand why I am having trouble with something that I would have considered simple.
Fiddle
HTML:
<div class="companyBox">
<div class="showPlans">
<img src="http://dummyimage.com/145x150/555555/000000&text=image" />
<p>Show Plans</p>
</div>
</div>
CSS:
.companyBox {
height: 250px;
background-color: #999;
text-align: center;
width: 100%;
display: table;
}
.companyBox img {
vertical-align: middle;
margin: 0 auto;
}
.companyBox .showPlans {
vertical-align: middle;
display: table-cell;
}