I'm trying to vertically center single and multi-worded links in a horizontal nav. The multi-worded links work fine but as you can see the single worded links float to the left. I tried adding a width to ul li a and ul li.colour but that changes the width of the div itself.
http://codepen.io/Compton/pen/ufGCI
You can try this, it's a bit hackish but it works:
ul li span {
display: inline-block;
vertical-align: middle;
height: 110px;
font-size:2em;
text-align: center;
padding: 0 20px;
line-height: 110px;
}
.doubleLine {
display: table-cell;
line-height: 1em;
}
The line-height on the span centers it vertically; you add the doubleLine class to spans with more than one line to revert them and keep them working like they were.
I'd like to see a neater solution than this, but again it works for now. You may have trouble down the line as the double line spans are only happening to look like they work, they won't always work for every combination of words. You can test this by changing one of the words to two characters, you'll see it doesn't actually center it.
Related
I created a website for a friend: http://personaltrainerffm.de/
and the logos underneath (see pictures) won't be shown centered. Also when browsing with a mobile device, it will get screwed. Can you please help?
THANK YOU VERY MUCH in advance
Screenshot on smartphone
Those logo containers (.container-erfahr ul li) all have a float: left setting in their CSS. Since the second one is higher than the third one, the fourth one is positioned below the third one (i.e. right of the second one) in the mobile view - that's the way floats work.
To fix this and center them, erase the float:left and define them all as display: inline-block. To center the elements, add text-align: center to their container element .container-erfahr.
These are the changed rules:
.container-erfahr ul li {
display: inline-block;
margin: 30px;
padding: 0px;
border: 0px solid lightgray;
list-style: none;
}
.container-erfahr {
margin-top: 100px;
margin-left: 0px;
text-align: center;
}
I have a list of items displayed in 3 columns. The items are of various heights which is causing problems with their alignments, forcing larges gaps. I would like them to display tight to each other vertically. You can see what I am talking about at my site Matthew Grenier Consulting. I would like the "Bright Beginnings" item to be directly beneath the "Yes We Do Coffee" item and the same in the first column. Any ideas how I can do this with CSS? I have played around for a couple hours without luck. Thanks.
Simply use display: inline-block; together with vertical-align: top; instead of float: left;.
div.appico ul.sp-portfolio-items > li {
background: transparent none repeat scroll 0% 0%;
padding: 0px;
margin: 0px;
/* float: left; remove this! */
display: inline-block; /* use this */
vertical-align: top; /* and this */
}
Also, remove float: left; from div.appico .sp-portfolio-item, or replace it as well.
This is the visual result:
If you want the fourth box even closer to the first one, I suggest you restructure this part of the page so that the boxes are beneath eachother (using three columns) instead of to the right of eachother, or you could set a fixed height.
.sp-portfolio-item:nth-child(3n+1){
clear:left
}
Firstly my CSS skills are... a work in progress. But I have got so far in as to successfully have a bunch of list items arranged in a grid. http://jsfiddle.net/ashanova/Y4SR3/2/
What I'd like to do now is centre the list items. I have tried to replace float with inline but it causes the width and height of each item to collapse. I would also like to centre the text horizontally and vertically within each list item as well, ideally ellipsisizing (not a word) overflow text. As one last specification I would like to only modify CSS to the ul and its children if thats possible.
While the language gets a little unclear when you're dealing with multiple parent and child elements, and centering (/middling) on 2 axes, I think that if the other answers aren't what you're looking for, you might actually want display: table-cell.
Check this fiddle.
If you give your li elements display: table-cell, text-align: center and vertical-align: middle, I think the text will arrange itself appropriately. Unfortunately, table-cell elements don't accept margin, so I added a 10px border instead.
In order to accomplish truncation of text that overflows and the insertion of an ellipse, you'll need to use some kind of javascript.
UPDATE
Having learned more about what you're after through the many other answers and comments, I've come up with a better solution here: http://jsfiddle.net/crowjonah/jx8sD/
What you need to do is insert <a class="list-item"> tags inside the li elements, and use this CSS:
.tile li {
background-color: white;
display: block;
float: left;
margin: 10px;
overflow: hidden;
}
.tile li a.list-item{
display: table-cell;
vertical-align: middle;
height: 75px;
text-align: center;
width:75px;
}
Text-align: center will align your list items to the center. Vertical-align: text-top will align items to the center vertically.
vetical-align will not actually do the job in this case. I wish it were that simple.
This aricle will give you some insight into the problem and will help you solve it:
Understanding vertical-align, or "How (Not) To Vertically Center Content"
This will do what you want. Borders on inline-block items are a pain, so I'm using a border to make it look right.
.tile li {
background-color: white;
display:inline-block;
border: 10px solid red;
width: 75px;
height: 75px;
text-align:center;
display:table-cell;
vertical-align:middle;
overflow: hidden;
}
You can see an attempt at what I'm trying to do here: http://rjlacount.com/clients/GreenTree/
I want the navigation li's to determine padding automatically so they can stretch across the entire width of the inner wrapper. So, if I added another li or took one out, they would still be centered and the padding of each li would just increase/decrease to make up for it.
Right now I'm floating the last navigation li to the right and adding padding to each one to try to get it as close to full-length as possible. So it's almost how I want it to look, but I have a space between the last two items that I'd like to get rid of.
Is this possible? Thanks for any help.
I don't believe this will work in < IE8, but you could always provide a float or display: inline-block fallback to those browsers using a conditional stylesheet.
Example
CSS
ul {
display: table;
width: 100%;
}
ul li {
display: table-cell;
}
ul li a {
display: block;
width: 100%;
height: 100%;
text-align: center;
}
jsFiddle.
jsFiddle with one more li, you'll notice the CSS is constant :P
jsFiddle
As you can see in the jsFiddle above, after each image there is a line break before the next element. The other type of element, the cycling text, doesn't do this. How can I change this so that there is no newline after each image? I want it to appear like this (blue boxes represent images, red boxes represent the cycling text element):
li { display: inline-block; } should sort it.
You use li elements which by default have this behaviour.
But for some elements you add a class to the li named text-cycler and the css for these is
ul.images li.text-cycler {
display: block;
float: left;
width: 96px;
height: 96px;
margin: 2px;
}
the float left is what causes those to be stacked one next to the other. but the li with images do not have this class so they are not floated left.