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>
Related
How to vertically align center .sub-block-2 element (like .sub-block-1) ?
.sub-block-1 should be display=flex
.sub-block-2 should be display=inline-flex
Behavior should be the same as now except .sub-block-1 and .sub-block-2 should be vertically centered
<div class="wrapper">
<div class='holder'>
Some text
<div class="block">
<div class="sub-block-1"></div>
</div>
<div class="block">
<div class="sub-block-2"></div>
</div>
dsdfsd sdfsdf dsfsdfsdf sdfsdfsdf sdfsdf sdfsdf
</div>
</div>
.wrapper {
width: 300px;
}
.holder {
line-height: 30px;
}
.block {
display: inline-block;
vertical-align: middle;
overflow: hidden;
}
.sub-block-1 {
display: flex;
background: #000;
height: 20px;
width: 60px;
}
.sub-block-2 {
display: inline-flex;
background: #000;
height: 20px;
width: 100px;
}
codepen https://codepen.io/ruvi/pen/yLaryJq
inline elements are a little funky with line height. (thread on how line-height affects inline elements)
Adding line-height: 0; to .block will align both sub-block1 and sub-block2 vertically, although if there's any text inside .block, there will be no extra space between lines.
.block {
display: inline-block;
vertical-align: middle;
overflow: hidden;
line-height: 0;
}
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 3 years ago.
https://jsfiddle.net/2L9mznzu/
There are two empty text button, how to align them into a row?
.button {
display: inline-block;
width: 80px;
height: 30px;
line-height: 30px;
background: gray;
margin: 0 4px;
text-align: center;
}
<div class="button">
</div>
<div class="button">Button
</div>
<div class="button">
</div>
Use vertical-align: top property to your .button.
The vertical-align CSS property specifies the vertical alignment of an
inline or table-cell box.
Source: MDN
See demo below:
.button {
display: inline-block;
vertical-align: top;
width: 80px;
height: 30px;
line-height: 30px;
background: gray;
margin: 0 4px;
text-align: center;
}
<div class="button">
</div>
<div class="button">Button
</div>
<div class="button">
</div>
just add vertical-align: middle;
.button {
display: inline-block;
width: 80px;
height: 30px;
line-height: 30px;
background: gray;
margin: 0 4px;
text-align: center;
vertical-align: middle;
}
You can wrap them inside a container div and use display:flex; this way they will always be aligned to the vertical center of the container div.
.button {
display: inline-block;
width: 80px;
height: 30px;
line-height: 30px;
background: gray;
margin: 0 4px;
text-align: center;
}
.container{
display:flex;
flex-direction:row;
align-items:center;
}
<div class="container"><div class="button">
</div>
<div class="button">Button
</div>
<div class="button">
</div>
</div>
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 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;
}
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: