I have displayed one of sprite's image in span tag. The span is in inside of the some other element like <div>, <li>, <p>. The parent elements of the span's, text alignment is center.
The text content of the parents elements are aligned center correctly. But i am not able to
make the span with sprite image to center.
Here i have added the sample code.
HTML Markup:
<div align="center"><span class="cameraIcon spriteImage"></span>Some Text Content</div>
Style
span.cameraIcon {
background-position: -240px 0;
width: 24px;
height: 24px;
position: absolute
}
Any suggestions would be appreciative.
Thanks!
By using absolute positioning, the span tag is no longer part of the text flow inside the div element, so it's not affected by text alignment.
You could use the style display: inline-block; to make the span element a block element that is still part of the text flow. (Some older browsers doesn't support that display value, though.)
It seems that the span serves no other purpose than to show a background image, so I would get rid of it completely and add the background to its parent element:
html:
<div class="cameraIcon spriteImage">Some Text Content</div>
css:
.cameraIcon {
background-position: -240px center;
}
Related
I have 2 div boxes next to each other using display: inline-block.
Without content both inline-block divs are vertically aligned to top.
If both have content they also vertically align to top.
If only one of them has text content then the div box that has text content is vertically aligned to bottom while the one wihtout any text content remains vertically aligned to top.
If one box has plain text content and the other has e.g. an input field or a header tag then the box with only text content moves down only slighly (maybe 2 or 3px) while the one with the input or header tag stays on top.
Please see jsfiddle link below
Why did the creators do this instead of always aligning them to top? Is there a deeper reason behind this?
UPDATE:
In your example just add:
.content_boxes{
width: 400px;
height: 200px;
background: lightgreen;
display: inline-block;
vertical-align:top;
}
Fiddle:
http://jsfiddle.net/genwQ/1/
You have to set vertical-align:top; to each element is display:inline-block;. Careful not to confuse: it is the element, NOT the parent.
Example:
ul li {
display:inline-block;
vertical-align:top;
}
Demo:
http://jsfiddle.net/X3RLB/
Realize that an unwanted space appears between your inline-block elements. This space CANNOT be removed with the margin:0px; property. To remove them you must add a comment tag between inline-block the elements.
Example:
<div id="content_cnt">
<div class="content_boxes"></div><!--
--><div class="content_boxes">dsasda</div>
</div>
Fiddle:
http://jsfiddle.net/genwQ/2/
A simple block element won't expand vertically unless its contents are of inline-block or block.
See fiddle: https://jsfiddle.net/4148xjvv/7/
Or see code:
HTML:
<div class='parent'>
<span class='padding'>Inline</span>
</div>
<br><br>
<div class='parent'>
<span class='inline-block padding'>Inline-block</span>
</div>
<br><br>
<div class='parent'>
<div class='padding'>Block</div>
</div>
CSS:
.parent {
background-color: red;
color: white;
}
.padding {
padding: 10px;
}
.inline-block {
display: inline-block;
}
Result:
The lateral padding works, but the vertical does not.
Chrome debugger shows that the padding is there, but bleeds out of the parent.
Obviously this isn't a huge issue, I can just change the children to inline-block if I need padding, so I want to know why this is happening.
I found this article to be very helpful in understanding what is happening: https://hacks.mozilla.org/2015/03/understanding-inline-box-model/
Any vertical padding, border, or margin applied to an element will not push away elements above or below it.
Basically, as you can see from the image above, the padding is added, it just doesn't change the vertical position of the element.
you are adding the padding to a span element, which is an inline element, where vertical padding won't move the element - its baseline (and therefore the text) stays where it is, due to the inline property of the span element.
therefore the vertical padding can only work in conjuction with the inline-block setting in your second parent element - or in your third parent element where you add it to a div element.
I know how to put a text next to an image by applying float:left to the img tag, but when I give it a link e.g href="#" the text won't stand stick to the image, it falls down. To give more info about the project, my <a> tags in the <p> tags are display: inline-block; and the css I applied to the img tags is:
float:left;
margin-right: 15px;
border:0px;
So why is this happening? I want my image to stand just as it does when I don't put it between <a> tags.
The float: left; means the element is floated to the left of the content within the same parent. Since you are wrapping the image inside of an <a></a> tag, the image is being floated to the left of the content within the <a>.
If you apply the float to the a instead of the img, then the a will be floated to the left of the content in its parent, as desired.
So the problem is when you have a block of text, and an image that is slightly too tall that you want to place in-line with the text. For example, a smiley. It will cause the line height of that line of the paragraph to grow, making the block of text look ugly.
I've actually already come up with a solution, but it's messy and I don't like it... If I wrap the smiley in a relatively-positioned div, and give it an absolute position I get the effect that I'm after:
.holder{display:inline-block;position:relative;width:16px}
.holder img{position:absolute;top:-16px}
<span class="holder"><img src="/smiley.gif" height="16" width="16"></span>
But it adds extra markup. Is there any way to achieve this without adding extra HTML elements - a pure CSS solution (no javascript!)
I wonder if I'm missing some application of overflow/vertical-align/float/display etc?
Many thanks!
Depending on the desired image position and whether you have a fixed line-height in pixels you could set a maximum height on your image that equals your line-height and set vertical-align: bottom on the image so it fits exactly into your line.
See this fiddle for an example.
p {
line-height: 18px;
}
p img {
max-height: 18px;
vertical-align: bottom;
}
<p>Some text <img src="/smiley.gif"> more text.</p>
Set the image as a background of a DIV and give the DIV fixed dimensions.
<div class="smiley"></div>
CSS:
.smiley {
float:right; <-- or inline-block if you want.
background-image:url(../smiley.gif);
height:20px;
width:20px;
}
So i have a couple of tag, and i have some text and images i'd like to center or align to the bottom inside of them. Vertical-align doesn't seem to be in the mood to work.
I'd also like to make a horizontal menu, which will have a start image (say, menutop.png), a filler (menubg.png) and a closing block (menubottom.png), and i'd like for the bottom closing block to automatically place itself at the end of the menu, no matter how long it happens to be.
Thanks!
This calls for absolute positioning in CSS. First you need to give the parent DIV a position value (relative or static at least).
Then, the images and text you want to align to the bottom you need to make position: absolute, and bottom: 0px.
The horizontal menu should be 100% width (display: block also works), and the closing block placed inside. Absolutely position the closing block, and give it "right: 0" so it is always to the right.
I solved it like this:
<div id="menu">
<img src="img/menutop.png" />
<div id="menucontent">
stuff goes here
</div>
<img src="img/menubottom.png" />
</div>
CSS:
#menu
{
width: 335px;
height: 100%;
float: right;
border:solid black 1px;
}
#menucontent
{
background:url(img/menubg.png) repeat-y;
width: 100%;
}
Thanks for the pointers though :)
Try this with the element you want to center something else within:
div {
display: table-cell;
vertical-align: center;
}
(Not sure if this works in every browser, but I'm fairly sure it does in Firefox and IE8 at least)