I'm trying to get a div with css property display:table-cell; vertical-align:middle to behave as it "should". My expectation is that text inside these divs would be vertically aligned regardless of whether it's wrapped in an anchor or not.
Here's a jsfiddle: http://jsfiddle.net/smittles/GsKg6/
What am I doing wrong that prevents the vertical-align property from rendering the text out centered vertically, in the same way the header does in this example.
There is no need to use display: table-cell or even float anywere in this example.
To vertically center the text in the header, set the line-height of the <h2> to match the height of #h2wrap. Or remove height from #h2wrap and increase its top and bottom padding instead.
To vertically center the images, labels and the buttons within the <a> tags, set their display to inline-block and add a vertical-align: middle. You will have to explicitly set their widths and also eliminate the extra spaces caused by inline-block, but I believe this would be the easiest solution.
If you have multiple lines of text line-height will not work.
See this for the ways of applying vertical align. The line-height won't work with text that needs to wrap (which I believe you have). You'll have to use display: table-cell.
Related
I was playing around with the line-height property from the following site:
http://www.w3schools.com/css/tryit.asp?filename=trycss_float6
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
I tried to understand about line-height and I read this:
On block level elements, the line-height CSS property specifies the
minimal height of line boxes within the element.
From:
https://developer.mozilla.org/en-US/docs/CSS/line-height#Examples
But interestingly in the example above from w3schools, changing the line-height property will increase the size of the containing div element which seems to be contradicting with the statement made in mozilla site. Hence I would appreciate greatly if any can offer clarification what actually a line-height does.
Thanks
line-height is actually given when we want to align the block elements in between along y-axis.
Forexample, i have a singled line text in w3schools and para height is 20px. The paragraph will be written in its own default way but if i use line-height equals the height of the paragraph then text in say W3schools will be aligned in the middle along y-axis. While if you want to horizontally align (x-axis align) your text then text-align:center is used for this purpose.
Remember, line-height do not totally depend on the height of its own element height. But it changes as follows.
If you have a single line text, height is 20px then give line-height: 20px to vertically align the text or vertically middle of text.
If you have a two line of text, height is 20px then give the line-height:10px and with the small padding-top to vertically align the text.
I hope this will lift you up. And i think you will not need to browse google more. If more you want explanation then i will give you jfiddle code. :)
It's not contradictory. Setting the line-height property on a div will apply the same line-height property to all inline children. So in your example, by setting the line-height property on the div, any child elements that are display: inline will have the new line-height applied to them. When the height of those child elements is increased, the height of the parent div increases to be able to contain the child elements.
I'm having an issue where I have a min-height set up in a div above the footer. In order to get the text in the footer to align center, I am using clear:both in the CSS. The only issue is that now there is a large space between the content and the footer?
Here's the site I'm working on:
http://brimbar.com/no_crawl/RiverHollow/about.html
Thanks!
It's because you have that floated image with the giant margin-bottom. clear: both means "no elements should be on either side of this element", so the footer has to be below that 600px margin.
The reason that the footer text isn't centered without clear: both is because it's only centering within the width between the start of the div and the left side of that image (plus its giant margin).
What you should do is change the markup so that your image appears in another column div inside the content div, since you seem to want to display it in its own column rather than floated. If you do this, you won't need the giant margin, nor will you need clear: both on your footer elements.
Here's a demo: http://jsbin.com/uxiqer/1/edit
Note you can use floats or position: absolute to position the .images div on right; I just find position: absolute easier to work with.
If you don't need images to display in their own column then you can simply keep the float on the image and remove that margin-bottom, then the text will wrap nicely around the image and its margin. This is the intended purpose of float. Then without the giant margin overflowing the content div, the footer text can be centered properly without any need for clear: both.
Remove the clear: both and add a specific height to the footer not just min-height. I can't get your text to align but I bet it would if you removed "position:static" on it.
Since you hard-coded the 1550px height on the container itself, the footer is taking up the rest of the space available to it since it only has a "minimum-height" requirement not max.
How do I vertical align floating elements?
I currently have 3 elements (an image floated left, another image floated right and a div with a margin:0 centered) in a wrapping div. These are currently aligned at the top but I want them to aling at the bottom of the div.
How can this be achieved without using position absolute on them as this is a responsive layout? I have tried making them display:inline-block and vertical-align: bottom but that does not help anything.
In order to use vertical-align on some element, that element must have display:table-cell; css style. http://jsfiddle.net/StPYR/
Your jsfiddle updated: http://jsfiddle.net/chCjT/16/
Instead of floating the elements you need to give them display:inline-block; css property
http://jsbin.com/ofojis/edit#preview
http://jsbin.com/ofojis/edit#source
Why is the top border of this inline element not displaying?
Adding float:left pushes this inline element down and it renders
well. How does float:left actually push it down, isn't it
supposed to push an element to the left?
Also, are you not supposed to use the margin property on inline
elements like <span>?
Technical explanation of how outline, border and padding are rendered in this example? ? :)
Because <span> is an inline element, and the positioning of inline elements starts from the top-left of the padding (not counting the border and margin).
float: left applies display: inline-block, which means that it's no longer inline. The positioning for inline-block elements starts from the top-left of the margin.
You can use margin on a <span> but it won't do anything useful :P
So I have a div tag to sort of draw boxes around various sections, and of course make actual sections.
In one of the sections, there is more text than can be held in the div tag, so I want to for the text within the div tag to have a scroll bar to make it so the text doesn't overflow outside of the box.
How would I do that?
Use the following:
div {
overflow: scroll;
}
If you want them to scroll only in one direction, you can use the overflow-x and overflow-y properties.
Add width and height CSS properties to the div, as well as overflow:auto
If you add overlow:scroll, the scroll bars will be always visible.
If you want to have only horizontal scroll, add white-space:nowrap to the element inside of the div.