I have a problem:
I'm building a wordpress site with Bootstrap.
I have a navbar with 3 menus: Left, Middle and Right.
Every UL is surrounded by an div like navbar-menu-left or navbar-menu-right.
The left and right divs are floated left or right.
Now I want to have the middle-menu in the middle or the navbar. If I center it with text-align: center in the navbar-header div, it's centered but if there's no right menu, it is centered between the left menu and the right side of the navbar. How can I center die middle menu in the parent div and not between the floating divs?
Margin doesn't work, the navbar-menu-middle is displayed with display: inline block. If i remove the display: inline-block it is next to the right menu. The order of the menus is:
left, right, middle
The images show what I mean:
Everything good (menus have nearly the same width):
But now: (right menu isn't there, may not be needed on some pages):
The problem is, that I don't know the width of the uls..
Hope somebody can help me!
A trick would be to have width of all three menu-containers be 33%. and seting text-align:left,text-align:center and text-align:right to containers Left, Middle and Right respectively.
Related
I created a menu bar through bootstrap that when the window width is smaller, the nav turns into a button menu. When the window width is made smaller, the button on the right is pushed down and not aligned with the logo on the left.
For the footer, I created two columns using col-md-6 and applied text-align: left, text-align: right to each column since they were not off to the side. Now when the window width is smaller, the same thing happens: the text/column on the right is pushed down and not aligned with the text on the left.
Both the nav and footer do not vertically align properly. I've tried setting a negative margin-top on both the button and text that are being pushed down; I've also tried using pull-left and pull-right and that made no difference either. I also have no media queries but I'm not sure if that is an issue.
Here is an example and the code: http://jsfiddle.net/w92w4dak/
Any ideas on how to vertically align the nav/footer properly would be appreciated.
The .navbar-toggle button needs to be inside the .navbar-header div to achieve the desired vertical alignment.
The footer columns should have the class .col-xs-6 instead of .col-sm-6 to ensure they stay as 50% of the screen width at all screen sizes (including mobile view)
I was taking a look at the navbar element in Twitter Bootstrap to see how they vertically center the elements inside the navbar because that is something I am always struggling with.
I always have to resort to 'random' margin/padding values which I've been told aren't good because they are magic numbers that only work in that specific context.
Surprisingly I was not able to discovery anything that actually vertical centers the elements – no line-height trickery or anything really, no display: table-cell.
The .navbar-brand class has a line-height of 20px (like the links inside .navbar-nav) and a padding of 15px, but how does that center anything? How do they do that?
Here you can see the code of the navbar: http://getbootstrap.com/components/#navbar
The navbar uses top and bottom padding to vertically center the text:
padding-top: 15px;
padding-bottom: 15px;
They don't vertically center the text.
I tested this by adding text to a navbar element using inspect:element in Chrome. Then I forced width the same way. The text wrapped to the next line. All lines were lined up at the top, not centered.
The bottom div is moved further to the left, why is that, how can I align them better?
Image of how it looks
Link to markup
Any help would be appreciated.
Ok, this is because of the Items inside the stats div. The bottom one has more "items" so it is moved further to the left (because it is wider and floated right). To fix this, I would recommend giving that div a fixed width, maybe 400px. so <div style="float: right; width: 400px;> on line 30.
I've got a div with a background color blue, that needs to be centered in another div with background green -- just for looks. I centered the blue div inside the green div with a "margin: 10px auto". Now, I need the text inside this blue div to be left justified, not centered, so I put the text inside a div and gave it a margin of zero. That didn't work.
Obviously I'm confused about centering things in general, and am still coming up the css centering / positioning learning curve. Any thoughts / comments appreciated. Thanks.
You need to place a:
text-align: left
style on the DIV containing the text.
margin: auto only works for centering DIVS, has no effect on actual text
I have a modal box where I'm trying to put two columns beside each other, and I did that by assigning float: left to one div (.center-columnb) and a float: right to .map-column.
What happens, however is that 'center-columnb' breaks the container div with the grey gradient background as if this div was placed UNDER that container div (notice the rounded edges on the bottom of the grey part, that was meant to be at the bottom of the div.
When I remove float: left from centercolumnb from style.css, everything is ok except that the column on the right does not stay there anymore. Does anyone have any alternatives that could help me? Thanks :)
You have a parent div of #contentholder but it's not containing the floats within it at this point. A floated element, by default, is taken out of the document flow and any parent div will collapse. To make it contain the floats within, you need to give it an overflow property. This should do the trick:
#contentholder {
overflow: auto;
}
Another way is to clear at the bottom of the Question container. For a full cross browser compliant solution, just add before the closing div:
<div style="clear:both"></div>