The div (#second) is spilling beyond its li container for height: 2em; Only way I can see it happen is due to some mysterious padding within the li. But why ? Using reset.css (say, by Eric Meyer) doesn't seem to make any difference either. Please help. (For height: 1em, there is no problem.)
Here is http://jsfiddle.net/d84e5/
CSS:
li {
display: inline-block;
padding: 0 .5em;
border: 1px solid #ccc;
line-height: 3em;
}
#second {
display: inline-block;
background-color: #000;
width: 50px;
height: 2em;
}
HTML:
<ul>
<li>first</li><!--
--><li><div id="second"></div></li><!--
--><li>third</li><!--
--><li>fourth</li><!--
--><li>fifth</li>
</ul>
This is because when you use display: inline-block your baseline will be in the middle. You can align the element in the middle of the baseline with:
vertical-align: middle;
jsFiddle
Adding vertical-align:top; solves the issue (or use middle if you want to align the div in the vertical center).
jsfiddle
li {
display: inline-block;
padding: 0 .5em;
border: 1px solid #ccc;
line-height: 3em;
}
#second {
display: inline-block;
background-color: #000;
width: 50px;
height: 2em;
vertical-align: top;
}
The content starts from the middle of the li, as the div is taller than the li it pushes the top of the li.
Fix:
li {
display: inline-block;
padding: 0 .5em;
border: 1px solid #ccc;
line-height: 3em;
}
#second {
display: inline-block;
background-color: #000;
width: 50px;
height: 1.85em;
}
It's basing itself off of the line-height.. not padding or margin. Lower the height to 1.8em or bring down the line-height of the li.
Related
I am using the css line-height propriety to position the :beforetext of the li element vertically in the middle of it's border as you can see in the snippet. My problem is that I want it to stay at the middle if the font size changed (for example if the user used the zoom text only functionality of the firefox browser). I thought of using line-height: calc(1 / 2em) but this wouldn't work since the / operator accepts only a number at the right side. here is my code
li {
list-style-type: none;
width: 20%;
float: left;
font-size: 10px;
position: relative;
text-align: center;
text-transform: uppercase;
color: purple;
}
li:before {
width: 40px;
height: 40px;
border: 4px solid purple;
content: counter(step);
counter-increment: step;
line-height: 40px;
font-size: 15px;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
}
<ul>
<li> element</li>
<li> element</li>
<li> element</li>
<ul>
you can use flexbox to align items inside your li which I think is a better solution than line-height
Try :
display: flex;
align-items: center;
justify-content: center;
in your li:before and remove the line-height. I think you will get the desired result.
Hope this helps
I'm trying to do a tab header, its a list of the titles, sometimes the titles are too long and has "-" in between. So to save space I add br to breakline.
1/The problem is the distance up & down between the "-" symbols is too big, is there any way I can fix that?
is this a correct way to do it by set br tag or should I set max-width for each li for the breakline?
This is my codepen
<div>
<ul>
<li>Real Estate, <br> Building House</li>
<li>Distribution <br>–<br> Manufacturing</li>
<li>Media <br>–<br> Broadway theater</li>
<li>Singer <br>–<br> dancer</li>
<li>Real Estate</li>
<li>Construction</li>
</ul>
div {width: 80%; margin: 0 auto;}
ul {
list-style: none;
/* display: table; */
width: 100%;
padding: 0;
margin: 0;
}
ul li {
position: relative;
font-size: 1.4rem;
/* display: table-cell; */
color: blue;
text-align: center;
display: inline-block;
margin-right: 20px;
}
Hope this helps you:
ul li {
font-size: 1.4rem;
color: red;
max-width: 120px;
padding: 10px;
vertical-align: middle;
text-align: center;
/* padding: 0 5px; */
display: inline-block;
margin-right: 14px;
}
Updated codepen
In my project here, I am not able to vertically center align the floated undo/redo elements on the top bar.
I tried vertical-align: middle also played with the line-height but I did not get the desired effect.
What am I missing?
jsFiddle
One solution is to use display: table and display: table-cell in place of the float and then use vertical-align: middle;
Have a fiddle!
#bar has display: table
h4 and #actions are treated as "table cells"
HTML
<div id="bar">
<h4>Tasks</h4>
<span id="actions">
<input type="image" id="undo" src="http://i.imgur.com/fyCSlvW.png" disabled />
<input type="image" id="redo" src="http://i.imgur.com/BshzaCg.png" disabled />
</span>
</div>
CSS
* {
margin: 0;
padding: 0;
}
body {
font-family:"Arial";
font-size: 62.5%;
}
#actions button {
background: none;
border: 0rem;
}
#actions button input {
outline: none;
}
#bar {
background-color: #4196C2;
display: table;
width: 100%;
}
h4 {
text-decoration: none;
display: table-cell;
vertical-align: middle;
margin-top: 2rem;
/* = 20px */
color: white;
padding: 20px;
font-size: 1.8rem;
}
#actions {
display: table-cell;
vertical-align: middle;
text-align: right;
}
You have not styled the span which contains the two buttons.
Add the following:
#actions {
display: block;
margin: 0 0 0 0;
padding: 15px 0 0 0
}
Here you go: http://jsfiddle.net/csTS7/151/
Add in the div a margin-top and do it with percent for example
#bar
{
margin-top: 5%;
}
Here's the JsFiddle
h4{
text-decoration: none;
display: inline-block;
/* margin-top: 2rem; = 20px */
color: white;
margin-left: 1.5rem;
font-size: 1.8rem;
line-height: 15px;
}
I have given the element bar a minimum height and removed margin top for h4 and added line-height
I have a series of buttons that I need to have text and a chevron with a different class.
The text and the chevron both need to be centered vertically and horizontally within the container and be able to expand and contract based on the number of the characters.
Additionally I need the chevron to always be flush against the text with a 10px left padding.
I'm having difficulty centering the text and arrow.
Thanks for your help!
section {
margin:2px;
}
.cta {
background-color: #8dc63f;
color: #fff;
font-size: 40px;
margin: 0 auto;
padding: 40px;
text-transform: uppercase;
width: 300px;
text-align: center;
}
.cta-text{
float:left;
text-align: center;
}
.arrow-lm{
float: left;
font-size: 40px;
margin-top: 10px;
padding-left: 10px;
position: relative;
top: -11px;
}
Here's the fiddle
http://jsfiddle.net/ebjrc/1/
Not sure if this is what you mean, but I would use the flexible box model.
section {
margin:2px;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
.cta {
background-color: #8dc63f;
color: #fff;
font-size: 40px;
margin: 0 auto;
padding: 40px;
text-transform: uppercase;
width: 300px;
}
.cta, .cta-text{
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
.arrow-lm{
font-size: 40px;
margin-top: 10px;
padding-left: 10px;
position: relative;
}
Let me know if this is what you need.
-- EDIT
jsFiddle here
Cheers!
I think your approach is much more complicaded as needed, if i understanded you correctly.
Remember that every anchor element can also have a layout. Why would you place a anchor and give a div inside it propties of layout when the anchor itself could have those propeties. This way you can use less elements in your code.
<div class="campaign-1">
<a href="#" class="submit">
Tune In
<span> > </span>
</a>
</div>
You can give you span a additional class if you need to edit it somewhere in your code, which i'm not aware of.
Now also this reduces your css code:
div {
background-color: #8dc63f;
color: #fff;
font-size: 40px;
margin: 0 auto;
padding: 40px;
text-transform: uppercase;
width: 300px;
text-align: center;
margin: .5em;
}
div a
{
color: white;
}
That's actually all you need.
jsFiddle
I've got a simple menu like this:
<ul class="menu">
<li>
Home
</li>
<li>
Products
</li>
<li>
Contact
</li>
</ul>
The list elements of the unordered list are floated to the left and have a fixed height:
ul.menu li {
float: left;
height: 50px;
list-style: none;
padding: 0 10px;
background-color: yellow;
}
jsFiddle
Now I would like to vertically center the anchors inside the list elements.
What is the best approach for that?
To vertically center text, set a line-height to the same value as the height of the element. Seeing as you have a set height, this will work with no problems:
.menu li a {
line-height: 50px;
}
http://jsfiddle.net/QNMy7/3/
add line-height equal the height:
.menu li {
float: left;
height: 50px;
**line-height: 50px;**
padding: 0 10px;
list-style: none;
background-color: yellow;
}
.menu li {
float: left;
height: 50px;
padding: 0 10px;
list-style: none;
background-color: yellow;
text-align: center;
min-width: 100px;
}
.menu li a
{
line-height: 50px;
}
The issue is with .menu li class. You have declared a float for it to move to the left, but to make it vertically-aligned, you have to remove the float and apply a display:table-cell; to get the vertical-alignment working.
For Instance,
.menu li {
/*float: left;*/
display:table-cell;
vertical-align:middle;
height: 50px;
padding: 0 10px;
list-style: none;
background-color: yellow;
}
Here is the WORKING SOLUTION
Hope this helps.
You can use line-height to control vertical alignment, but this only works reliably across each list item if they're all restricted to one line.
The most reliable way to achieve this is by removing the float & displaying the list item as a CSS table-cell:
.menu {
display: table;
}
.menu li {
height: 50px;
padding: 0 10px;
list-style: none;
background-color: yellow;
display: table-cell;
vertical-align: middle;
}
.menu li a {
display: block;
}
This way, if one of the links drops onto two lines, it's still vertically centered, as shown here:
http://jsfiddle.net/QNMy7/6/
In addition to float and table-cell, you can also use inline-block:
.menu li {
display: inline-block;
line-height: 50px;
padding: 0 10px;
list-style: none;
background-color: yellow;
}
.menu li a {
vertical-align: middle;
}
Similar to the other posts, I set line-height: 50px on .menu li and vertical-align: middle on the a elements. You can omit the height in this example.
See demo: http://jsfiddle.net/audetwebdesign/QNMy7/7/