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
Related
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.
I have a div inside a div. The .outer div has overflow set to hidden and is 200px wide. The .inner div is 300px wide and hides fine per the overflow spec.
What I'd like to do is find a way to align the inner div so that it cuts off the overflow on the left side instead of the right.
I could use positioning and negative margins but ultimately the inner div is variable width, so I'm hoping there's a way to accomplish this without 'hard-coding' anything?
Here's the fiddle: http://jsfiddle.net/xCYPc/
Try setting float: right; on the .inner
Just add direction: rtl to your .outer div, see working fiddle
From http://www.w3.org/wiki/CSS/Properties/direction :
The direction property specifies the base writing direction of blocks
and the direction of embeddings and overrides for the Unicode
bidirectional algorithm.
Also, it specifies the direction of table column layout, the direction
of horizontal overflow, and the position of an incomplete last line in
a block in case of 'text-align: justify'.
Make .outer position:relative and .inner position:absolute;right:0. That will keep the inner div aligned right regardless of its width.
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
I'm creating a header that holds an image (logo) and a navigation.
The UL for the navigation is floated right within the header div. This places it at the top of the div but I'd like to align it to the bottom.
What is the best way to do this?
Have tried vertical align, which seems to do nothing and have tried position property too (bottom:0) but does not work.
I'm sure this is a common problem.. any ideas?
With CSS:
.header {position:relative}
.header ul {position:absolute;right:0;bottom:0}
In below code how do I do vertical center element span with class "ExclamationPoint" ?
I want to design it like below picture :
I tried Padding-top and vertical; align but I couldn't style like image
I want to position span with class "ExclamationPoint" vertically middle regardless the height of side DIV.
JSFiddle Link
You can force it to the middle of the div like so:
First make sure the parent div (NewsNote) has a position set, so add position:relative;.
Now, you can center .ExclamationPoint by giving it a height of 0, position:absolute; and top:50%;. This will push the div down to the exact middle.
Now the exclamation point will be below the center, to fix this add line-height:0;.
http://jsfiddle.net/vNDUx/1/