I need to vertically align in middle labels of menu. Allso if client will change the value of label and it will break in two lines, it'll stays in middle. As i know vertical-align: middle works for table cells, but I need to generate menu from <li> elements. See example code below.
html
<ul>
<li>qwe</li>
<li>asd</li>
<li>zxcvbnm asdfgh</li>
</ul>
css
ul {
list-style: none;
}
li {
float:left;
border: 1px solid;
margin: 1px;
height: 60px;
width: 60px;
background: tomato;
text-align: center;
vertical-align: middle;
}
a {
vertical-align: middle;
}
And working prototype at jsbin
Hi now give to li display:table-cell and remove float:left
as like this
li {
display:table-cell;
vertical-align: middle;
float:left; // remove this line
}
Demo
Just add line-height:60px to your a tag and it works.
See Demo
Use display: inline-block for <a> elements.
ul {
list-style: none;
}
li {
float:left;
border: 1px solid;
margin: 1px;
height: 60px;
line-height: 60px;
width: 60px;
background: tomato;
text-align: center;
vertical-align: middle;
}
a {
vertical-align: middle;
display: inline-block;
line-height: normal;
}
Example fiddle : http://jsbin.com/ohazot/1/edit
Related
I have a list with multiple links in it. I want them to display next to each other with a coloured background and some white space between them.
First I had "display:inline-block;" but then I couldn't give the link a vertical align. So I found out that I had to make the display a table-cell but now I don't have white space because I have a coloured background.
I have used padding but this didn't gave me white space. This is my code with fiddle:
HTML:
<div id="frontpage-menu">
<ul class="button">
<li>Info</li>
<li>Diensten</li>
<li>Projecten</li>
<li>Contact</li>
</ul>
</div>
CSS:
#frontpage-menu {
width: 1000px;
display: block;
height: 50px;
}
.button li {
display: table-cell;
background-color: #4A4A2F;
width: 200px;
height: 65px;
text-align: center;
vertical-align: middle;
}
.button li>a {
text-decoration: none;
font-size: 40pt;
color: #FFFFFF;
letter-spacing: -4px;
}
This is my fiddle: http://jsfiddle.net/0L7275dq/
You can add border: 3px solid; border-color: white in your css for li.
You can check this fiddle link for the demo: Fiddle
add the style
border-collapse:collapse to your cells and table, that SHOULD fix it
Use:
and for larger spaces:
Add the tag at the end of your text and you will get space after your text.
you can find a full list of these codes here HTML Codes
#frontpage-menu {
width: auto;
display: block;
height: auto;
}
.button ul {
height: 65px;
background-color: red;
width: 200px;
display: inline;
}
.button li {
/*display: table-cell;*/
background-color: #4A4A2F;
width: 200px;
height: 65px;
text-align: center;
vertical-align: middle;
padding-left: 10px; /*this is where you should mess around with your white space.*/
}
.button li>a {
text-decoration: none;
font-size: 40pt;
color: #FFFFFF;
letter-spacing: -4px;
}
I have the following simple code snippet. It is taken out from my application where .a1 is a container button, which has an icon. The icon should be vertically middle aligned to the parents line-height/height, but it is shifted with 1px from top. Could you explain me why this is the behavior? Is there any solution?
.a1 {
display: inline-block;
width: 28px;
line-height: 28px;
background-color: #000;
text-align: center;
vertical-align: middle;
}
.i {
display: inline-block;
width: 16px;
height: 16px;
background-color: #f00;
vertical-align: middle;
}
<div class="a1"><i class="i"></i>
</div>
Why?
Because inline-block elements render with "white-space". You can see this in this demo where no height/width is set on the parent element.
When you use vertical-align:middle; the "white space" is rendered before the element (on top) (black line in the demo). This space moves the child element down and therefore it doesn't appear verticaly centered.
how to fix :
You can use display:block; and calculate the margin to apply to the child element so it centers verticaly and horzontaly.
You can also take a look at this question which talks about white space and ways to avoid them.
Well, it seems like font-size:0; for .a1 seems also a fix for such issue.
.a1 {
display: inline-block;
width: 28px;
line-height: 28px;
background-color: #000;
text-align: center;
vertical-align: middle;
font-size: 0;
}
.i {
display: inline-block;
width: 16px;
height: 16px;
background-color: #f00;
vertical-align: middle;
}
<div class="a1"><i class="i"></i>
</div>
.a1 {
display: inline-block;
background-color: #000;
}
.i {
display: block;
width: 16px;
height: 16px;
margin: 6px 6px;
background-color: #f00;
}
<div class="a1"><i class="i"></i>
</div>
.a1 {
display: inline-block;
background-color: #000;
}
.i {
display: block;
width: 16px;
height: 16px;
margin: 6px 6px;
background-color: #f00
html
<div class="main">
<h1>Test</h1>
<span class="details">Jan 21, 2014</span>
</div>
css
.main{
background-color: #666666;
border: 1px solid red;
}
h1{
background-color: #383838;
display: inline-block;
margin: 0;
padding: 0;
}
.main span{
display: inline-block;
vertical-align: middle;
}
jsFiddle
This seems to be really a simple problem, but I'm not able to fix it or I'm being too lazy. Just would like to vertical-align: middle and align it to the right of the div, if I use float: right the element attaches to the bottom of the border above. Don't want to use line-height as well.
If you want a solution that doesn't include line-height, and float, also you want to align the span to the right ....
Then use display: table; for the parent element having nested child elements set to display: table-cell;
Demo
.main{
background-color: #666666;
border: 1px solid red;
display: table;
width: 100%;
}
h1{
background-color: #383838;
display: table-cell;
margin: 0;
padding: 0;
width: 20%;
}
.main span{
display: table-cell;
vertical-align: middle;
text-align: right;
}
You want to add vertical-align: middle; to your h1
Fiddle
html
<ul class="tabs-bottom">
<li>Booking</li>
<li>Special Offers</li>
</ul>
css
.tabs-bottom{
list-style: none;
margin: 0;
padding: 0;
}
.tabs-bottom li{
width: 216px;
height: 55px;
background: #000;
display: inline-block;
text-align: center;
}
demo
I can do this with display table-cell but I strongly searching for with display inline-block
here is working demo with display table-cell demo
.tabs-bottom{
list-style: none;
margin: 0;
padding: 0;
border-spacing: 10px 0;
}
.tabs-bottom li{
width: 216px;
height: 55px;
background: #000;
display: table-cell;
text-align: center;
vertical-align: middle;
}
If you are ok with other display property, you can use diaplsy:table-cell like this
.tabs-bottom li{
width: 216px;
height: 55px;
background: #000;
display: table-cell;
text-align: center;
vertical-align:middle;
}
This is the complete css you need to have it working.
This also handles very long texts, which wrap around (multi-line link texts):
.tabs-bottom{
list-style: none;
margin: 0;
padding: 0;
}
.tabs-bottom li{
width: 216px;
height: 55px;
line-height: 50px;
background: #000;
display: inline-block;
text-align: center;
}
.tabs-bottom li a
{
line-height:16px; /*This is in place, to prevent inheriting the li's line-height*/
display:inline-block;
vertical-align: middle;
}
You can test it in this fiddle:
http://jsfiddle.net/vVnR5/
Notice
jsFiddle doesn't seem to work in IE 7 and 8, so i couldn't test it.
If they're only ever going to be one line, you can center them with line-height,
.tabs-bottom li{
width: 216px;
height: 55px;
line-height:55px
background: #000;
display: inline-block;
text-align: center;
}
It's trickier if you want a multi-line center, but it can be achieved using display:table-cell;
EDIT Here is a version where it will center regardless of number of lines http://codepen.io/robsterlini/pen/btqjv but remember that it will default back to appearing at the top for IE7 and below (see here).
I know vertical alignment is always asked about, but I don't seem to be able to find a solution for this particular example. I'd like the text centered within the element, not the element centered itself:
li a {
width: 300px;
height: 100px;
margin: auto 0;
display: block;
background: red;
}
<ul>
<li>I would like this text centered vertically</li>
</ul>
Is there really no CSS property for this? I'd be willing to add a <span> in but I really don't want to add any more markup than that.
According to the CSS Flexible Box Layout Module, you can declare the a element as a flex container (see figure) and use align-items to vertically align text along the cross axis (which is perpendicular to the main axis).
All you need to do is:
display: flex;
align-items: center;
See this fiddle.
You can also try
a {
height:100px;
line-height:100px;
}
li a {
width: 300px;
height: 100px;
display: table-cell;
vertical-align: middle;
margin: auto 0;
background: red;
}
display: grid; place-content: center;
no need margin.
li a {
width: 300px;
height: 100px;
display: grid;
place-content: center;
background: red;
}
<ul>
<li>I would like this text centered vertically</li>
</ul>
You can try the display:inline-block and :after.Like this:
HTML
<ul>
<li>I would like this text centered vertically</li>
</ul>
CSS
li a {
width: 300px;
height: 100px;
margin: auto 0;
display: inline-block;
vertical-align: middle;
background: red;
}
li a:after {
content:"";
display: inline-block;
width: 1px solid transparent;
height: 100%;
vertical-align: middle;
}
Please view the demo.
Would using padding be OK for your needs?: http://jsfiddle.net/sm8jy/:
li {
background: red;
text-align:center;
}
li a {
padding: 4em 0;
display: block;
}
You can also use inline-table alongside table-cell if you want to center your items vertically and horizontally. Below an example of using those display properties to make a menu:
.menu {
background-color: lightgrey;
height: 30px; /* calc(16px + 12px * 2) */
}
.menu-container {
margin: 0px;
padding: 0px;
padding-left: 10px;
padding-right: 10px;
height: 100%;
}
.menu-item {
list-style-type: none;
display: inline-table;
height: 100%;
}
.menu-item a {
display: table-cell;
vertical-align: middle;
padding-left: 2px;
padding-right: 2px;
text-decoration: none;
color: initial;
}
.text-upper {
text-transform: uppercase;
}
.text-bold {
font-weight: bold;
}
<header>
<nav class="menu">
<ul class="menu-container">
<li class="menu-item text-upper text-bold">StackOverflow</li>
<li class="menu-item">Getting started</li>
<li class="menu-item">Tags</li>
</ul>
</nav>
</header>
It works by setting display: inline-table; to all the <li>, and then applying display: table-cell; and vertical-align: middle; to the children <a>. This gives us the power of <table> tag without using it.
This solution is useful if you do not know the height of your element.
The compatibilty is very good (relative to caniuse.com), with Internet Explorer >= 8.
Here's the general solution using just CSS, with two variations. The first centers vertically in the current line, the second centers within a block element.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul>
<li>
line one
</li>
<li>
<span style="display: inline-block; vertical-align: middle">line two dot one
<br />
line two dot two</span>
</li>
<li>
line three
</li>
</ul>
<div style="height: 200px; line-height: 200px; border-style: solid;">
<span style="display: inline-block; vertical-align: middle; line-height: normal;">line two dot one
<br />
line two dot two</span>
</div>
</body>
</html>
As I understand it, vertical-align applies only to inline-block elements, e.g., <img>. You have to change an element's display attribute to inline-block for it to work. In the example, the line height expands to fit the span. If you want to use a containing element, such as a <div>, set the line-height attribute to be the same as the height. Warning, you will have to specify line-height: normal on the contained <span>, or it will inherit from the containing element.
with thanks to Vlad's answer for inspiration; tested & working on IE11, FF49, Opera40, Chrome53
li > a {
height: 100px;
width: 300px;
display: table-cell;
text-align: center; /* H align */
vertical-align: middle;
}
centers in all directions nicely even with text wrapping, line breaks, images, etc.
I got fancy and made a snippet
li > a {
height: 100px;
width: 300px;
display: table-cell;
/*H align*/
text-align: center;
/*V align*/
vertical-align: middle;
}
a.thin {
width: 40px;
}
a.break {
/*force text wrap, otherwise `width` is treated as `min-width` when encountering a long word*/
word-break: break-all;
}
/*more css so you can see this easier*/
li {
display: inline-block;
}
li > a {
padding: 10px;
margin: 30px;
background: aliceblue;
}
li > a:hover {
padding: 10px;
margin: 30px;
background: aqua;
}
<li>My menu item
</li>
<li>My menu <br> break item
</li>
<li>My menu item that is really long and unweildly
</li>
<li>Good<br>Menu<br>Item
</li>
<li>Fantastically Menu Item
</li>
<li>Fantastically Menu Item
</li>
<br>
note: if using "break-all" need to also use "<br>" or suffer the consequences
DO NOT USE THE 4th solution from top if you are using ag-grid. It will fix the issue for aligning the element in middle but it might break the thing in ag-grid (for me i was not able to select checkbox after some row). Problem is not with the solution or ag-grid but somehow the combination is not good.
DO NOT USE THIS SOLUTION FOR AG-GRID
li a {
width: 300px;
height: 100px;
margin: auto 0;
display: inline-block;
vertical-align: middle;
background: red;
}
li a:after {
content:"";
display: inline-block;
width: 1px solid transparent;
height: 100%;
vertical-align: middle;
}