I'm creating a horizontal menu bar.
There is an outer div that contains inner divs (each of these divs is the individual menu item).
I use float: left for styling on these inner divs to display them horizontally instead of vertically.
The problem is that the menu bar has uneven space on the left and right, hence the overall menu bar doesn't appear to be centralized... i.e the first menu item on left has lesser space from left border and the space between last menu item on right and the right border is more.
I want equal margin/padding on the left and right to make the menu bar display in center.
I tried setting margin-left: auto; margin-right: auto on the outer div and then on the inner div as well. Both don't seem to help.
Already had a look here: How to horizontally center a <div> in another <div>?
However this particular answer is to center just one div, what I have is a collection of horizontal divs (menu items) that need to be centralized.
Any help is appreciated.
If your menu items aren't complex (like no fixed sizes or sub-elements), try adding the following styles:
#outer {
text-align: center;
}
.menu-item {
display: inline; /* replace 'float:left' with this */
}
DEMO
Otherwise you'll need a wrapper for the inner elements that has a fixed width:
#wrapper {
margin: 0 auto; /* center in outer DIV */
width: /* sum of widths of inner elements */;
}
DEMO
NOTE: Semantically its better to style menu items using a list, as in the DEMOs.
Firstly if all your menu items have specified widths and display:inline which is default, you wouldn't need a float to line them up.
But supposing you do, when you set a float, your elements are removed from the natural flow of the document, and hence margin:auto will not work to center it. What you could do in this case is create another container div of specified width for the menu items, within which you could use float to line them up.
Now what's left is to center this one container div within your outer div, which you have already seen how to solve. For example, you could use the margin:auto technique on the container div to center it. Make sure you have text-align:center for the outer div.
Related
I have a div nested inside another. The parent div contains the title for a drop down menu. The inner div contains the choices. I have them in different divs so that I can add a scroll to the inner div without it causing the title to scroll. I have borders around both. The inner div looks to be 1px narrower on each of the sides. How do I make the child div exactly the same width as the parent div?
That's what width:inherit; is for.
What's your code like?
Try this, it should work:
width: 100%;
All I want to do is center some divs on the page. The outer one is a fixed size and is centered horizontally via margin: 0 auto. Inside that div I have a couple images side by side inside another div that wraps to their size. I want to center that div both vertically and horizontally inside the outer div.
It seems like a simple enough thing to want to do, no?
Update:
Let me bit a bit clearer as to what exactly the problem is. I'd love to use the display: table-cell trick to enable vertical-align: middle but the problem is that when I do this, the div shrinks down to the size of its content, thus not offering any space for centering at all, and that div is just stuck up in the top left corner of the parent. I need my display: table-cell block to fill up the available space of the containing div so it has room to center its contents.
Update 2: Solved!
Turns out the problem was that I didn't have the display: table-cell block contained in a div that was set to display: table. I'm not entirely sure how display: table differs from display: block, but it's apparently a necessary step. It appears to be working now!
This might help:
http://www.vanseodesign.com/css/vertical-centering/
I have a container div with a max-width and a max-height. Inside the container div, there are lots of small divs that i need to scroll through horizontally.
I've hidden the y-overflow CSS and used the inline/inline-block and have had no luck.
Here's the code:
http://jsfiddle.net/BRmCk/
I need the other small divs to show up in the parent div, in one line, horizontally.
any ideas?
Try adding float: left; to your .date_pick_day_cont class.
Example:
http://jsfiddle.net/BRmCk/6/
I want to create a page with a horizontal centered content block that reaches from teh top to the bottom of the browser window. I already figured out that tables are not the right way to design a layout. A block that reaches from top to bottom is not the problem:
<div style="position:absolute;top:0px;width:800px;height:100%;background-color: #fff;">
</div>
But I'm not able to make this Div centered. I tried
"margin:auto"
But no effect. Th centers the text in the Div, but not the Div itself on th screen.
To center a div you need two things, a width, and automatic horizontal margins. Like this:
#myDiv {
width:800px; /* or whatever */
margin:0 auto;
}
There is no need for absolute positioning, just these two rules will do the trick.
to center an Absolutely Positioned div add left: 50%; margin-left: -400px;
where the negative margin value is half the width of the div
Try not to use position:absolute for layouts unless necessary. This sample shows best practice for horizontally centering your content.
If you need a solution that will continuously work to restrain the content area height within the viewable area, try my jQuery solution: http://jsfiddle.net/BumbleB2na/Z75hA/
I have a php script that is generating an unspecified number of divs inside another but by default the divs are being vertically aligned as in one of top of the other though their widths can allow for them to be horizontally aligned. How can i go about this?
div > div{
display: inline-block;
}
float them to left
float:left;
or give them inline display mode.
display:inline;