HTML
<div class="wrapper join-links">
<ul>
<li>Whatever</li>
<li>Something</li>
</ul>
</div>
CSS
.join-links li {
float:left;
margin-right:20px;
}
Is it somehow possible to align both links "centered" or "justified" inside of the sorrounding wrapper div?
http://jsfiddle.net/CRrmL/
edit: And I also wonder if I can align them right?
Change float: left to display: inline to give you:
.join-links li {
display: inline;
margin-right:20px;
}
You can then use text-align on the parent div.
Example centre align
Example right align
To align alinks to the right or center you need use text align and display inline or inline-block to li element. Float property transforms any element to a block.
http://jsfiddle.net/CRrmL/15/
http://jsfiddle.net/CRrmL/16/
You can do this through the common margin hack for centering:
.join-links ul{
margin:0 auto;
}
Then you need to set the li elements to be displayed in line:
.join-links li {
display:inline;
}
You can make the links justified like this. Just define a class to both li and float first li to left and second li to right.
Check this example
Related
JS Fiddle here
I am attempting to align child elements evenly between left and right. I tried using margin-left and right: auto but nothing happened.
Here is a screen shot of the navigation in question. I have added a border of 1 px around each element so you can see:
I'd like the nav line items to be centred in comparisson to their parent. So in the image the line items would move to the right a bit to be centred between the parent rectangle, which is an unordered list.
Here is my approximation of the relevant html:
<nav>
<div id="main-nav">
<ul id="menu-main">
<li>cats</li>
<li>dogs</li>
<li>sheep</li>
</ul>
</div>
</nav>
Currently relevant (I think) CSS is:
#main-navigation {
display: inline;
float: left;}
#main-navigation div {
display: block;}
#menu-main {
position: relative;
float: left;}
#menu-main li {
float: left;
}
Put another way, I'd like to centre floated child elements against the parent. If I zoom in and out with my browser I can see that the nav adjusts and change size with some line items moving between top and bottom row in order to fit.
But is there a way to ensure that, whatever the current size of the nav, the child line items will be centred?
Here's another picture, where I have manually added a margin left to #menu-main.
Now it looks more centred on my screen right now. But is there a way to auto centre it?
See this : http://jsfiddle.net/rahjrLny/1/
You don't need to float your li elements, simply set them to display:inline . Then you can add text-align: centre to your ul element, and all should be good.
(You'll need to remove some margins that have appeared in the fiddle due to the changes)
This would be my solution: JSFiddle
There's some redundant CSS (for example, no need to specify #main-navigation div {display: block;} if you don't have any div elements inside the #main-navigation).
I've gone with display:inline-block as opposed to display:inline (plus added some colour borders for visual clarity). Please bear in mind I'm working with the code you supplied in the question rather than building the code from the screenshots.
nav {display:inline-block; width:100%;}
#main-nav {
float:left;
width:100%;
}
ul#menu-main {
margin:0;
padding:0;
text-align:center;
width:100%;
float:left;
}
#menu-main li {
list-style: none;
padding: 0.5em;
display:inline-block;
}
EDIT: I answered this question before I observed there was a fiddle supplied, and worked instead from the code supplied in the question. This may not be the right answer for OP but I'm going to leave it alone for now as I believe it gives a valid example of how one could approach the task of centering a nav list.
I'm trying to use the vertical-align: middle on a layout to vertically center sometimes text, sometimes images, but it's only working on text. Can anyone tell me why?
HTML:
<div>
<img src="http://jsfiddle.net/img/logo.png"/>
</div>
<div>
<span> text </span>
</div>
CSS:
div{
width:200px;
height:200px;
background-color:red;
display:table;
margin:10px;
}
img, span{
display:table-cell;
vertical-align:middle;
}
http://jsfiddle.net/9uD8M/ I created a fiddle aswell
Put border: 1px solid black on your img, span tags, then inspect both elements in the browser dev. console. You'll notice that the span defaults to 100% height of its parent, while the image has a defined height (the height of the actual image).
So you're not really vertically aligning those elements relative to the div, you're just vertically aligning the text inside the span element relative to the span :)
If you really want to use tables for vertical-centering, here's the correct code:
http://jsfiddle.net/WXLsY/
(vertical-align and display:table-cell go on the parent, and you need wrapper table on them)
But there are other ways to do this (SO has many answers to this question, just use search)
Here is one way of fixing the problem:
HTML:
<div>
<span><img src="http://jsfiddle.net/img/logo.png" /></span>
</div>
<div>
<span> text </span>
</div>
Put your img in a span, the image is a replaced element, it cannot contain children content, hence, vertical-align will not work.
CSS:
div {
width:200px;
height:200px;
background-color:red;
display:table;
margin:10px;
}
span {
display:table-cell;
vertical-align:middle;
}
See demo at: http://jsfiddle.net/audetwebdesign/Fz6Nj/
There are several ways of doing this, you could also apply display: table-cell to the parent div element, but that would be a different approach.
In order to vertically align an image inside a table cell you need to give the image a display of block.
display: block
margin: 0 auto
the margin: 0 auto is to align the image to the center. If you want the image left aligned then don't include this. If you want the image right aligned you can add:
float: right
Thanks,
G
You can try by adding -> line-height: 200px; in the span style section, I think it might work;
I have an unordered list styled to display horizontally. One of the li elements contains a div element. This div element is filled using ajax, though it shouldn't matter.
The div element has a larger height than the rest of the li elements, and by default it aligns with the bottom of the parent container.
Update: Well, isn't this awkward. I coded a simpler example in jsfiddle http://jsfiddle.net/Bfp3K/, and it works properly. I have to check my code again to get the error in the sandbox.
Update2: It wasn't that easy after all. I have added my proposed (and used) solution.
Update3: Disregard the previous answer, it wasn't correct. This is a simplified and testable example of the problem:
JSFiddle: http://jsfiddle.net/Bfp3K/10/
CSS:
#one {
background-color:red;
}
#two {
background-color:green;
}
#three {
background-color:yellow;
}
#four {
background-color:blue;
}
.normal {
height:100px;
width:200px;
display:inline-block;
}
.big {
height:200px;
width:300px;
display:inline-block;
}
ul {
display:block;
}
ul li{
display:inline;
}
HTML:
<ul>
<li><div id="one" class="normal">One</div></li>
<li><div id="two" class="normal">Two</div></li>
<li><div id="three" class="normal">Three</div></li>
<li><div id="four" class="big">
The last div vertically aligns to it's content's last line of text. I want to align the top of all the colored divs.
</div></li>
</ul>
Images:
What the solution should look like:
What the problem looks like:
Just replace the display:inline-block; declarations with float:left; Since you're specifying the dimensions anyway, you don't need inline-block. The jsFiddle works and here's a pic.
.normal {
height:100px;
width:200px;
float:left;}
.big {
height:200px;
width:300px;
float:left;}
The solution was very simple after all. Based on another answer:
li div{
vertical-align:top;
}
Since the elements have display:inline-block;, adding vertical-align:top seems to solve it. I won't mark this as the solution in case this isn't the proper solution.
http://jsfiddle.net/dv3Mm/
updated (bottom-aligned):
<html>
<head>
<style>
li {
display:inline-block;
}
.item {
vertical-align: bottom;
}
</style>
</head>
<body>
<ul>
<li>Text 1</li>
<li><div class="item">Text 2<img src="some.jpg"/></div></li>
<li>Text 3</li>
</ul>
</body>
</html>
Set the LI's line-height to the same pixel height of the image.
Solution 1 (quick and dirty):
set a margin-bottom: [negative value here]
or bottom: [negative value here] if your li are relatively positioned and the div is absolutely positioned. This is assuming that you know exact values.
Solution 2:
I'm assuming that the text in the other elements are links.
Set top and bottom padding to those links (specifically the <a> tags, so that they are vertically aligned in the middle)
Solution 3 (a bit more html):
Put two divs in each li. Wrap the div you already have in another div again. Use the a vertical centering method (such as the tabel-cell method) to vertically center all the inner divs. http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
(The li tags you already have might already work as the outer div wrap, but I'm not sure. didn't get to test that yet)
In the code posted in the question the LIs have display: inline, and in the jsfiddle 'simpler example' their display is reset to inline-block (via classes). Inline-block is different from inline that it isolates any block-level content (like DIVs) inside, while attempting to put something block-level into inline causes the inline element to break into several so called anonymous block boxes. May be this is the reason?
I am having some trouble getting this menu centered.
I tried text-align:center; on the <ul> and margin:auto;.
I'm not sure if I have to float anything, or change the display setting
JSFiddle: http://jsfiddle.net/FQ3mK/
First method: center the container <div> by using text-align:center:
#navcontainer {
text-align: center;
}
Live demo: jsFiddle
Second method: give a fixed width to the container <div> and use margin:auto:
#navcontainer {
width: 600px;
margin: auto;
}
Live demo: jsFiddle
margin:auto works only if you give the container (the <ul) a fixed width.
see: http://jsfiddle.net/FQ3mK/3/
I too was looking into this. I found the best answer here: https://stackoverflow.com/a/17634702/2537445
I think it's the best because it is the most dynamic, cross-browser compatible answer.
As to your particular anchors, you wouldn't be able to use display: block on them.
However, you can apply padding to the left and right of an inline anchor, and padding to the top and bottom of an inline li to give the spacing you need.
#cssmenu ul {
text-align:center;
}
#cssmenu ul li {
display: inline;
}
So I have a simple list thats set out like below
<ul class='my-videos'>
<li>
<a class='show-more' href='' title=''>Show More</a>
</li>
<ul>
I am trying to get the .show-more to be center aligned. I have got this far
ul.my-videos li .show-more
{
display:inline-block;
margin:0 auto;
}
Now this doesn't work. I have setup a JSFiddle here http://jsfiddle.net/6HHKf/
Any ideas on this?
PS I want to keep the anchor as inline or inline-block so that the width isn't 100%
UPDATE
There are other elements in the li, so text-align is out of the answer
ul.my-videos li .show-more {
margin:0 auto;
border:#aaa 1px solid;
width: 100px;
display: block;
}
if you want center an element width margin: 0 auto you need to set the width
and also, you need display:block
check jsfiddle here: http://jsfiddle.net/6HHKf/5/
Simply set the CSS for the list item to center align the text.
.my-videos li { text-align: center; }
Easy, just add text-align:center; to the li.
Edit
Since you need to cope with other mystery elements in the li this may work http://jsfiddle.net/6HHKf/6/
If it's an option to use an extra span within the a element, you could use relative positioning with left +/- 50%
http://jsfiddle.net/ptriek/6HHKf/8/