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).
Related
JSBIN
I want to center the number row, but its parent has fixed attribute and I don't want to javascript to calculate the number row position. Is there anyway to achieve with pure CSS?
I have try as follow:
use margin: 0 auto, not successful, perhaps the reason is no width.
use text-align: center, not successful, perhaps the number row is not inline element.
Thanks a lot :)
Remove float:left from your li and add display:inline-block then use text-align:center on the ul.
#menu{
position: fixed;
top: 0;
left: 0;
width: 100%;
border:1px solid #f00;
z-index: 99;
ul{
width: 100%;
margin: 0 auto;
text-align:center;
padding: 0;
list-style-type: none;
li{
display:inline-block;
a{
display: inline-block;
width:32px;
height: 32px;
text-align: center;
font-family: "Microsoft YaHei";
font-size: 1.5rem;
line-height: 180%;
text-decoration: none;
border-radius: 50%;
}
}
}
.active{
a{
background-color: rgba(255,255,255,0.7);
}
}
}
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
I have small problem with some design.
I have this very simple html:
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
This is just a small part of a bigger widget. To make thsi widget work, I need at least this css:
div {
position: relative;
width: 400px;
height: 200px;
}
ul {
z-index: 99;
}
li {
display: block;
float: left;
width: 16px;
height: 16px;
}
Now I want to put list down into the midst of div. There is no problem with putting it down, but it is impossible for me to put it into middle. List can have any number of items.
JSfiddle: http://jsfiddle.net/MBxNU/1/
So far, I tried for example:
ul {
width: 100%;
display: block;
text-align: center;
}
But it didnt work and I have no clue why.
If you could give me some help, I'd appreciate it.
Your code with text-align: center doesn't work because you have floated items inside ul. You can use display: inline-block instead of float:
li {
display: inline-block;
width: 16px;
height: 16px;
background-color: red;
margin: 5px;
}
JSfiddle: http://jsfiddle.net/caprella/r2RjM/1/
Here you are ;)
div {
position: relative;
left: 20px;
top: 20px;
background-color: #EEE;
width: 400px;
text-align: center;
height: 200px;
}
ul {
padding: 0;
display: inline-block;
z-index: 99;
list-style: none inside;
}
li {
float: left;
width: 16px;
height: 16px;
background-color: red;
margin: 5px;
}
So the main idea is to set text-align: center for parent div and display: inline-block for ul, that's it )
So I'm trying to keep an unordered list centered once the website hits a certain media query. I can't get it to stay in the center of it's container if the page is moved around. Here is the corresponding code.
HTML
<div id="centerNav">
<ul id="home-nav">
<li>DUI/DWI Defense</li>
<li>Criminal Defense</li>
<li>Estate Planning</li>
<li style="border: none;"> Agricultural Law</li>
</ul>
</div>
CSS
#media only screen and (max-width: 839px)
{
#centerNav {
margin: 0 auto;
max-width: 840px;
padding: 0;
height:60px;
}
#home-nav li {
float: left;
position: relative;
display: block;
text-align: center;
background: none;
font-size: 20px;
width: 158px;
border-right: 1px solid #fff;
margin-top: 8px;
line-height: 1em;
padding-left: 10px;
}
#home-nav {
list-style:none;
position:relative;
height: 60px;
vertical-align: middle;
z-index: 5;
border-top: 4px double #fff;
border-bottom: 4px double #fff;
border: none;
margin: 0;
background: #7a0426;
}
}
Remove float from li and make it display: inline-block
I think this will solve your issue.
css
#centerNav {
margin: 0 auto;
max-width: 840px;
padding: 0;
height:60px;
text-align:center;
}
#home-nav li {
position: relative;
display: inline-block;
text-align: center;
background: none;
font-size: 20px;
border-right: 1px solid #fff;
line-height: 60px;
padding:0 10px;
}
jsFiddle Code
In your media query you need to make sure float is none because you have float set from previous css
#home-nav li {
float: none;
display: inline-block;
}
The unordered list that contains the li, add text-align: center
#home-nav {
text-align: center;
}
Also your html structure is currently invalid because you have a div as the immediate child of a ul. You can wrap the ul with the div if you need to but it definitely should not be the way it is now
That should solve the issue
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