I am able to center horizontal list with text-align:center, but I wonder how can I keep it centered inside container, but has rows aligned left.
My container has percent width, so I need it working when resizing window and blocks are reordering
Please check the sample image below to understand my problem:
UPDATE:
Please find JsFiddle as per request
I need to center my <ul> inside div.container
Use this:
ul {
margin: auto;
}
li {
float: left;
}
See this fiddle:
You already know to center the <ul> with margin: auto;
The key is to adjust the <li> within it.
You can do that by using float: left;
Alternatively: you can set display: inline-block;
Both have a similar effect, but aren't identical. Play w/it.
By providing margins & percentage widths, you can play w/size and separation of the elements.
Since these are all block-level elements, they'll stack up & wrap automatically.
By floating or changing display of the <li> you keep them left-aligned within their parent element (the <ul>).
Also, by using separate CSS classes instead of targeting the <li> element directly, you leave things flexible in case you want to have a right-aligned list, or some other options later.
Wrap your boxes within another div.
You can then center that div with display: block; margin: 0 auto;, while keeping the boxes left-aligned.
Related
In this fiddle I have a load of divs, an input and some images that are displayed inline. I want to shift the images down a bit so it looks nicely aligned, but when I apply padding or margin, it simply pushes down every element inside the container.
<div class="rs-paging">
<div class="rs-pageclick">
<img class="rs-selectfirst" src="http://findicons.com/files/icons/2296/fidelity/32/arrow_left.png" alt="" title="First Page">
</div>
.rs-pageclick img {
cursor:pointer;
display: inline-block;
margin-top: 15px;
}
http://jsfiddle.net/paull3876/qds8pnfx/2/
I've tried display:table/table-cell, no difference. I started without the images in container divs and that was just the same. vertical-align:top doesn't seem to help. And it ssems the same with padding or margin.
I don't really want to resort to position absolute/relative as I think there should be a way with simply setting padding. This is driving me nuts !
thanks
The elements are all set to display: inline-block;. When you give one of the elements a margin-top, you push the whole line down.
Are you trying to get the items to align vertically? If so, you could use vertical-align: middle; on the inline-block elements.
http://jsfiddle.net/nea4w6h3/1/
Using overflow:hidden and fixing height for divs seem to work and fit your requests (I added a div containing all the text ones) :
https://jsfiddle.net/qds8pnfx/5/
My <ul> element has some <li>'s containing text, and one containing an image. I want them to appear in a single line, centered horizontally within the parent element, and also their <li> contents centered vertically and horizontally. I have the following code:
http://codepen.io/littlemissintrovert/pen/NqqLRr
By far, it's going great, however, I have an issue with the <li> containing an <img>. It's positioned higher than other <li> elements.
I can't find much resources to help me with this issue. Maybe I suck with searching but I found this link: List items appearing below other list items containing images. It seems we have the same problem and someone suggested there to use:
display: table-cell;
vertical-align: middle;
However, when I try to use it, I am unable to center the <ul> horizontally, relative to the size of its parent container. Plus, I can't space out my <li> elements using margin.
As much as possible, I really want to avoid defining the width. I want my elements to span across the screen 100%.
for fixing img issue
Add display:block to the a tag as it is a inline element
Add vertical-align:middle for the img tag as img is a inline element it will align it vertically middle
you can also use this technique to add the margin on the left side of the li
#mainnav li + li{
margin: 0 0 0 3em;
}
which will only give style to the next element
demo - http://codepen.io/victorfdes/pen/pJJORw
Just add vertical-align:middle to image will solve your issue:
Check your updated Codepen Here.
I am currently creating a navigation bar for my site, and I've looked everywhere and tried some stuff but I couldn't figure out what I've fudged up :P
Anyways, I've got some boxes I named 'nav-box' and they hold the navigation elements inside them. I have these displayed inline-block so that they look like nav elements.
2 things now, the text inside these boxes are stuck to the left of the box, I have to have them centered. Alongside this, the boxes seem really big. Do i have to set their width manually or can I have css make them fit?
Here is the JSFiddle i have created with my code. I've tried adding 'inline-block' to both the element and it's parent container, but neither of them work for this situation :(
This is what I've tried:
.nav > .nav-content > .nav-inner {
width: auto;
float: right;
text-align: center;
}
As you can see that is my parent element holding the nav-box element and I added the text-align: center;, but it still didn't do what I need.
http://jsfiddle.net/qhPwt/
The text inside the boxes are not aligned to center because there is a margin-right being applied to the content inside the boxes.
Check this FIDDLE
CSS changes
.nav > .nav-content > .nav-inner > .nav-box > .nav-link:last-child {
margin-right: 80px; // Remove this style
}
I have links and a sprite image I want to render in one line centered vertically:
HTML:
Why Eminem is the best
<div class="sprite" id="pointer"></div>
by
<img alt="Justin meltzer" src="/system/photos/1/tiny/Justin Meltzer.jpeg?1305874692">
Justin Meltzer
How would I get all of these elements on one line?
I'd do a jsfiddle but I don't have my sprite images at a public url
Set your div to display inline-block so that everything will stay on one line. Do you want the links to then be aligned with the center of the image?
http://jsfiddle.net/gUrc9/
div.sprite { background: blue; height: 50px; width: 50px; display: inline-block; }
UPDATE:
As pointed out in comments inline-block is not supported in IE6/7 unless the element it is applied to is naturally inline. So better solution would be to change div to span.
span.sprite { display: inline-block; }
Your going to need to set your pointer div to be displayed inline:
#pointer { display: inline;}
By default div tags are block-level elements. This will force them inline with the rest of the items.
I would start with one improvement. DIVs are displayed as block, so if u r using a sprite, u wud give it a width n height anyway, in that case go for SPAN.
Now wrap a div around them and give it a style:text-align: center;. Or you could also give this outer DIV a width. and do a margin: auto;.
You'd be better off using a <span> for the pointer - a <div> is for grouping related elements - which this doesn't. It will also sit on the same line automatically, becasue a span is an inline element.
I have a div that encapsulates many unordered lists (ul). I have each ul set to "float:left". And I also have the parent div that contains them set to "overflow-x:scroll". What's happening is the ul's are wrapping when they hit the edge of the page and not staying side by side to take advantage of the scrolling property of the parent div (the scroll bars are there). Why? How can I fix this?
Thanks for any help.
you need to insert those uls in another div, to which you'll give width=[width of ul]*[number of uls]
http://jsfiddle.net/seler/gAGKh/
or count total width of uls
http://jsfiddle.net/seler/gAGKh/1/
You can set your list items to display: inline-block, then use white-space: nowrap. Works in most modern browsers.
http://jsfiddle.net/gAGKh/22/
Because you floated the ULs, they don't exist in the document flow anymore so they won't expand the parent div (hence the wrapping.)
Try setting an explicit width on the parent div that allows for all of them to exist side by side.
ALSO, if you aren't clearing the ULs in the parent div then you'll more than likely run into issues there too, vertical ones. Make sure you clear your floats :)
You need to:
Make the <li> also float.
Set fixed width to each <ul>.
Set fixed width to the containing <div>, enough to hold all the lists.
For example:
ul { width: 250px; }
li { margin-left: 5px; }
ul, li { float: left; }
div { overflow-x: scroll; width: 750px; }
Test case.