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
Related
A div which contains an image has rounded corners using border-radius and overflow:hidden.
The div also contains another div with an orange background and some white text.
When the second div is placed over the image using a negative margin, the result is that the orange background is hidden behind the image, but the white text appears over top of the image. Why is this?
Fiddle: http://jsfiddle.net/nq9Jv/
Further question: how do I make the orange div appear fully "above" the image, bearing in mind that I cannot use position: relative because that would take it out of the flow and thus not allow the border radius of the first div to conceal a part of the second.
I am not sure the reason that the orange background doesn't appear above the image when using a negative margin.
I have tweaked your example a bit, and by using position: relative on the parent element and position: absolute on the child element, made the orange div appear above the image while maintaining the border-radius concealing the child element.
http://jsfiddle.net/nq9Jv/4/
Is that what you want?
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.
I can align the "Learn More" in the center for this responsive layout, but the sides are not clickable to the banner in the background. I outlined the paragraph tag in yellow. What can I do to keep Learn More in the center and to not use width:100% on it? What seems tricky is keeping it in the center for all responsive display resolutions, so a left-margin:45% isn't a good solution.
Uploaded a copy:
http://meowzen.com/pacific-wild.org/initiatives
Remove the wrapping paragraph, set the link width in css (width: 90px;) and make its margin: 0px auto; or you can play with the top and bottom margins as you wish.
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>
I am creating a menu to my site in ul.buttons.
In it I have a title, span.button-title, a sub-title span and a code p.
This code must be aligned vertically to the center, half of the title and subtitle.
How to make the autura the tag p (in red) will have the same autura of div.button. I tried height: 100%; but failed.
After her stay with the same height, I would align the tag p in the center, vertical.
See the code.
Thanks.
I updated your jsFiddle with some changes.
First, inline-block elements don't consider the vertical size. So it's necessary changing to block and do the horizontal align with float.
Then, elements cannot use height: 100% if their parent has no fixed height. Then a height was set to the button class.