This question already has answers here:
Vertically align text next to an image?
(26 answers)
Closed 8 years ago.
EDIT:
Yes, this is a duplicate, my mistake (I am new to CSS). But can anybody explain the rationale behind aligning the image, as opposed to the link / text? Is there some larger concept at work here that would help me understand the concepts of CSS better and avoid problems like this in the future?
Original (Duplicate) Part:
I have a scenario where I want to have a link next to an image on my page, and the link should be aligned so that it is vertically centered with the image. Of course I don't know the exact height of the image, so this should be done dynamically.
Given this chunk of HTML, how would I achieve such a thing with CSS?
<div class="myDiv">
<img src="myImage"/>
My Link!
</div>
I have a fiddle at this location, and you will note that I have placed some size information in the image class. This is just to simulate an image of unknown size, so please consider the question without it.
4.8. Vertical alignment: the 'vertical-align' shorthand baseline alignment property
Applies to: inline-level and 'table-cell' elements
This property affects the vertical positioning of the inline boxes generated by an inline-level element inside a line box. The following values only have meaning with respect to a parent inline-level element, or to a parent block-level element, if that element generates anonymous inline boxes; they have no effect if no such parent exists.
While the elements a and img are both inline by default, the property vertical-align:middle should be used on the img element instead.
jsFiddle example
.myDiv img {
vertical-align: middle;
}
try this:
.myDiv img{
vertical-align:middle;
}
DEMO
Add vertical-align:middle; to the image instead of link.
Updated fiddle here.
just use vertical-align: middle;
.myDiv img {
vertical-align: middle;
}
Related
I have <div> element with background image from sprite. On left and right of that <div> I have <input> buttons (prev, next).
The thing is that <div> with background doesn't seem to have any width, so it is squeezed between (and covered with) the two buttons.
The question is: how do I preserve the width of the <div> element?
The example is here: http://jsfiddle.net/meridius/4Dk2n/
EDIT:
I won't mind restructuring the elements!
Try setting the min-width property of the <div>.
.sprites-sachy {
min-width: 100px;
}
min-width:100px
or
padding-right:50px
or
or put a into the div element (so it's not empty) and add a width:100px;
OK, so I added one <div> wrap for buttons and figure and alter the css and here is the working result.
http://jsfiddle.net/meridius/4Dk2n/2/
First: please see this fiddle: http://jsfiddle.net/gamehelp16/77ssr/
So, these images:
(source: placekitten.com)
Uses the float:right property
and this image:
(source: placekitten.com)
uses the float:left; property
And if you see at the fiddle the third image (with the float:left ones) is not located beside the second image (the big ones)
My question is: how to make the third image is on the right side of the second image. I need pure CSS solution
Thanks
Update:
i've figured out an alternative way to do it. it's by setting the second image's float to left :D
You could float the big one and have the little ones set to block display. View on JSFiddle.
html
<img src="http://placekitten.com/200" id="left">
<img src="http://placekitten.com/100">
<img src="http://placekitten.com/100">
css
img:not(#left) {
display: block;
}
#left {
float: left;
}
To move them as a unit, you could set them in a parent container element like this.
The float element of css is relative to the page not the actual elements, i'll recomend you make 2 divs, and inside these divs the imgs to position, or you can simple use top or left elements. The choise is yours.
There are my codes. (jsfiddle)
Why this part of my codes isn't running?
header{background-color: #2bd5ec;}
I want to add background color to header tag. What i need to do?
The issue here is that since the elements inside your header are floated, they're considered in a different flow than your header, and thus it doesn't resize to fit them.
One way to fix this is to append <div style = "clear: both;"></div> to your header; little demo: little link.
You can also just add overflow: hidden; to your header: another little link, or float it as well: yet another little link.
you can set Height for Header.
for example :
header{background-color: red; height:100px;}
and you can use "clear" like this :
<header>
<div id="info">
<h1>Oyunn.in</h1>
</div>
<div id="categories">
<p>Barbie - Benten - Senten</p>
</div>
<br clear="all"/>
</header>
and css:
header{background-color: #2bd5ec;}
#info{float: left;}
#info h1{font-size: 100%;margin: 0;}
#categories{float: right;}
#categories p{margin:0;}
use overflow:hidden
header{background-color: #2bd5ec; overflow:hidden;}
The overflow CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element.
Using the overflow property with a value different than visible, its default, will create a new block formatting context. This is technically necessary as if a float would intersect with the scrolling element it would force to rewrap the content of the scrollable element around intruding floats. The rewrap would happen after each scroll step and would be lead to a far too slow scrolling experience. Note that, by programmatically setting scrollTop to the relevant HTML element, even when overflow has the hidden value an element may need to scroll.
The overflow declaration tells the browser what to do with content that doesn't fit in a box. This assumes the box has a height: if it doesn't, it becomes as high as necessary to contain its contents, and the overflow declaration is useless.
SEE DEMO
Add
header{background-color: #2bd5ec;width:100%; height:30px;}
Background attribute usually needs div's dimensions
actually you didn't clear your child floats so whenever we are using float so we should clear the floats and we can give overflow: hidden; in our parent div to clearing the child floated div's.
header {
background-color: #2BD5EC;
overflow: hidden;
}
see the demo:- http://jsfiddle.net/vE8rd/17/
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
DIV width and height wont resize when setting innerHTML?
I have a div tag and it has text written as inner HTML, like this for example:
<div>Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.........</div>
The inner HTML has a long text. Under the div tag I have kept an anchor tag. The problem is, when I shorten the height of div tag, say to 200px then the anchor tag comes over the inner HTML of div tag.
But, I want that when I shorten the height of div tag the inner HTML should also have the same height. I mean the anchor tag will appear just below the div tag and the div tag will have 200px height. I have googled around but didn't got much help. I hope I have made myself clear. If you have any doubts ask me please. I need help.
you need to set the height in % rather than px; so change your anchor tag height in % means height: 5% this will probably solve your problem.
set position property of your anchor tag to be relative
a#MyA
{
top:100px;
position:relative;
}
I am not sure if i understant your problem correctly but at least in your jsfiddle link there was a lot of typos, corrected some and here's the results
<div id="aa">Some Text. Some Text. Some Text. Some Text. Some Text. Some Text.Some Text.Some Text. Some Text. Some Text.Some Text.......</div>
<div id="bb">Read More</div>
Also added some colors for easier debugging.
Take a look at it.
Check this too, another possibility what you are trying to do...
div#aa {
height: 100px;
background-color: #f00;
overflow: hidden;
}
a {
background-color: #aaf;
}
I have got the solution for this problem:
DIV width and height wont resize when setting innerHTML?
You have to add the overflow property for the div tag.
To explain my problem, I'm trying to make a div wide enough to accommodate a dynamically generated title without wrapping it, but the div also has other content, which I want to wrap.
In other words:
CSS:
.box {
min-width:170px;
}
.box span.title {
font-size:24px;
white-space: nowrap;
}
.box span.text{
font-size:10px;
white-space: normal;
}
HTML:
<div class="box">
<span class="title">Title on one line</span><br />
<span class="text">This is the main body of text which I want to wrap as
required and have no effect on the width of the div.</span>
</div>
However, this is causing the div to expand to be wide enough to contain the main body of text on one line, which I want to wrap. I've tried various arrangements for CSS and the putting them all inside container divs and the like but I can't seem to get the box to be exactly wide enough to contain only the title without wrapping (but not less than the min width)
Is there any way to do this just in CSS? Note I don't want to set a max width as this just causes it to become a static size again, as the main body of text is always going to be enough to hit the max width. I also can't line break the body manually as it's dynamically generated.
Is this (jsFiddle) what you're trying to accomplish?
I just added display: table; to .box's CSS. This expands the main div to the width of the title span but wraps the text span.
Note: You can also set a constant width to prevent the div from expanding to the width of the window. This way it will still expand to the width of the title if it is larger than your constant width, but will not grow if the user drags out the window. In my example I added width: 100px; to demonstrate.
A working jQuery example:
http://jsfiddle.net/8AFcv/
$(function() {
$(".box").width($(".title").width());
})
For headlines you should use the <hN> tags (<h1>, <h2> etc).
For no text wrap:
white-space: nowrap;
On the element who's text you don't want to wrap.
Working Example on jsFiddle
If i understand your correctly you can easily set the same width for yours text as for yours title using JS or jQuery, for ex:
$('.text').width($('.title').width())
and run it at jQuery(document).ready or by event if you add it dynamically
Block elements such as divs extend as far as content pushes them, unless specified by explicit widths or heights.
A pure CSS solution for this is unlikely without setting a max-width on the div.
A pointer on CSS:
Don't include the tags in your selectors (i.e. tag.class) as you are then forced to use that tag with that class. Simply using .class will make it easier to change your markup (should you need to) as well as make your class extend its use to more than a single tag.