I am trying to hide the text in a link and make the image visible only and the image click-able.
I am using the code below but the text doenst seem to hide.
<span class="cnn-b">
<a href="http://www.cnn.com" alt="cnn" title="cnn">
<span class="cnn-text">cnn</span>
</a></span>
css
.cnn-b{
width: 200px; height: 75px;
background: url("cnn.png") no-repeat 0 0;
text-indent: -9999px;
}
.cnn-text {
text-indent: -9999px;
}
You don't need all the extra markup of <span>-s and there is a better ( performance-wise ) way to hide the text than text-indent: -9999px - DEMO
HTML
cnn
CSS
.cnn {
width: 200px;
height: 75px;
display: inline-block;
background: url(http://lorempixel.com/200/75) no-repeat 0 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
You are missing:
display:block;
You should use:
.cnn-text {
display:block;
text-indent: -9999px; }
You could insert an <img> element along with the span, and display:none; on the text:
<span class="cnn-b">
<a href="http://www.cnn.com" alt="cnn" title="cnn">
<span class="cnn-text">cnn</span>
<img src="cnn.png" />
</a>
</span>
css
.cnn-b{
width: 200px; height: 75px;
}
.cnn-text {
display:none;
}
I think there are several ways to do what you're talking about.
It sounds like what you're talking about is simply having an image that is clickable. If that is the case then I would recommend putting the span inside the anchor tag:
<a href="http://www.cnn.com" alt="cnn" title="cnn">
<span class="cnn-b"></span>
</a>
If you do that, then the only thing you need to worry about is making sure that the image is displayed which can be done by sizing the span in the CSS to the correct width and height and setting the display to block (block will allow it to keep the width):
.cnn-b {
width: 200px; height: 75px;
background: url("cnn.png") no-repeat 0 0;
display: block;
}
Here's an example:
http://jsfiddle.net/CPUKP/1/
By default a span is an inline element. The width and height property will not work as you intend it on the .cnn-b span. If you change
<span class="cnn-b"> to <div class="cnn-b"> or as suggested by James use display:block; on the cnn-b span not the cnn-text span That will solve your problem.
Your final code should be like this:
<html>
<head>
<style>
.cnn-b{
display: block;
width: 200px; height: 75px;
background: url("cnn.png") no-repeat 0 0;
text-indent: -9999px;
}
.cnn-text {
text-indent: -9999px;
}
</style>
</head>
<body>
<span class="cnn-b">
<a href="http://www.cnn.com" alt="cnn" title="cnn">
<span class="cnn-text">cnn</span>
</a>
</span>
</body>
</html>
Related
I'm implementing pagination, and it needs to be centered. The problem is that the links need to be displayed as block, so they need to be floated. But then, text-align: center; doesn't work on them. I could achieve it by giving the wrapper div padding of left, but every page will have a different number of pages, so that wouldn't work. Here's my code:
.pagination {
text-align: center;
}
.pagination a {
display: block;
width: 30px;
height: 30px;
float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
To get the idea, what I want:
Removing floats, and using inline-block may fix your problems:
.pagination a {
- display: block;
+ display: inline-block;
width: 30px;
height: 30px;
- float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
(remove the lines starting with - and add the lines starting with +.)
.pagination {
text-align: center;
}
.pagination a {
+ display: inline-block;
width: 30px;
height: 30px;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
inline-block works cross-browser, even on IE6 as long as the element is originally an inline element.
Quote from quirksmode:
An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block.
this often can effectively replace floats:
The real use of this value is when you want to give an inline element a width. In some circumstances some browsers don't allow a width on a real inline element, but if you switch to display: inline-block you are allowed to set a width.” ( http://www.quirksmode.org/css/display.html#inlineblock ).
From the W3C spec:
[inline-block] causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
Since many years I use an old trick I learned in some blog, I'm sorry i don't remember the name to give him credits.
Anyway to center floating elements this should work:
You need a structure like this:
.main-container {
float: left;
position: relative;
left: 50%;
}
.fixer-container {
float: left;
position: relative;
left: -50%;
}
<div class="main-container">
<div class="fixer-container">
<ul class="list-of-floating-elements">
<li class="floated">Floated element</li>
<li class="floated">Floated element</li>
<li class="floated">Floated element</li>
</ul>
</div>
</div>
the trick is giving float left to make the containers change the width depending on the content. Than is a matter of position:relative and left 50% and -50% on the two containers.
The good thing is that this is cross browser and should work from IE7+.
Centering floats is easy. Just use the style for container:
.pagination{ display: table; margin: 0 auto; }
change the margin for floating elements:
.pagination a{ margin: 0 2px; }
or
.pagination a{ margin-left: 3px; }
.pagination a.first{ margin-left: 0; }
and leave the rest as it is.
It's the best solution for me to display things like menus or pagination.
Strengths:
cross-browser for any elements (blocks, list-items etc.)
simplicity
Weaknesses:
it works only when all floating elements are in one line (which is usually ok for menus but not for galleries).
#arnaud576875 Using inline-block elements will work great (cross-browser) in this case as pagination contains just anchors (inline), no list-items or divs:
Strengths:
works for multiline items.
Weknesses:
gaps between inline-block elements - it works the same way as a space between words. It may cause some troubles calculating the width of the container and styling margins. Gaps width isn't constant but it's browser specific (4-5px).
To get rid of this gaps I would add to arnaud576875 code (not fully tested):
.pagination{ word-spacing: -1em; }
.pagination a{ word-spacing: .1em; }
it won't work in IE6/7 on block and list-items elements
Set your container's width in px and add:
margin: 0 auto;
Reference.
Using Flex
.pagination {
text-align: center;
display:flex;
justify-content:center;
}
.pagination a {
display: block;
width: 30px;
height: 30px;
float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
text-align: center;
float: none;
I think the best way is using margin instead of display.
I.e.:
.pagination a {
margin-left: auto;
margin-right: auto;
width: 30px;
height: 30px;
background: url(/images/structure/pagination-button.png);
}
Check the result and the code:
http://cssdeck.com/labs/d9d6ydif
You can also do this by changing .pagination by replacing "text-align: center" with two to three lines of css for left, transform and, depending on circumstances, position.
.pagination {
left: 50%; /* left-align your element to center */
transform: translateX(-50%); /* offset left by half the width of your element */
position: absolute; /* use or dont' use depending on element parent */
}
.pagination a {
display: block;
width: 30px;
height: 30px;
float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
IE7 doesn't know inline-block.
You must add:
display:inline;
zoom: 1;
Add this to you styling
position:relative;
float: left;
left: calc(50% - *half your container length here);
*If your container width is 50px put 25px, if it is 10em put 5em.
<!DOCTYPE html>
<html>
<head>
<title>float object center</title>
<style type="text/css">
#warp{
width:500px;
margin:auto;
}
.ser{
width: 200px;
background-color: #ffffff;
display: block;
float: left;
margin-right: 50px;
}
.inim{
width: 120px;
margin-left: 40px;
}
</style>
</head>
<body>
<div id="warp">
<div class="ser">
<img class="inim" src="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">
</div>
<div class="ser">
<img class="inim" sr`enter code here`c="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">
</div>
</div>
</body>
</html>
step 1
create two or more div's you want and give them a definite width like 100px for each then float it left or right
step 2
then warp these two div's in another div and give it the width of 200px. to this div apply margin auto.
boom it works pretty well. check the above example.
Just adding
left:15%;
into my css menu of
#menu li {
float: left;
position:relative;
left: 15%;
list-style:none;
}
did the centering trick too
JSFiddle SSCCE here
From this website:
Unlike images, table cells default to middle vertical alignment:
From the text of this question,
Theoretically, vertical-align supposed to work inside an element with
display:table-cell. It always works if you add a wrapper with
display:table around. But when it has no wrapper, sometimes it will
work and sometimes vertical-align will be completely ignored...
In this SSCCE, a.previous-slide-arrow and a.next-slide-arrow have display: table-cell; and they have a wrapper first-viewport with display:table;, But still vertical-align does not seem to work on a.previous-slide-arrow and a.next-slide-arrow. Why? And what should I do to make it work?
Code:
.image-slideshow-container {
}
.image-slideshow-container img {
position: fixed;
display: none;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
img.slider-image1 {
display: block;
}
.first-viewport {
height: 100%;
width: 100%;
position: absolute;
display: table;
}
a.previous-slide-arrow, a.next-slide-arrow {
width:128px;
height:128px;
display: table-cell;
vertical-align: middle;
position: relative;
color: transparent;
opacity: 0.7;
text-align: center; /* =s */
left: 20px;
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-left-128.png");
background-repeat: no-repeat;
}
a.next-slide-arrow {
right: 20px;
left: auto;
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png");
}
.navigation-arrows-container a.previous-slide-arrow:hover,
.navigation-arrows-container a.next-slide-arrow:hover {
opacity: 1;
}
.navigation-bullets-container {
text-align: center;
margin-top: 20px;
margin-bottom: 60px;
display: table-cell;
vertical-align: bottom;
position: relative;
}
.navigation-bullets-container span {
display: none;
}
.navigation-bullets-container a {
width: 20px;
height: 20px;
display: inline-block;
margin-right: 5px;
background: #4b4040;
}
.navigation-bullets-container a:hover{
background: black;
}
.navigation-bullets-container a.active {
background: black;
}
<div class="image-slideshow-container">
<img class="slider-image1" src="http://i992.photobucket.com/albums/af42/webtreatsetc/Textures%20Patterns%20Brushes%20from%20Webtreats/LightBlur.png" alt="pitcher!"/>
<img class="slider-image2" src="http://m.rgbimg.com/cache1vNdB6/users/x/xy/xymonau/600/ooNRizq.jpg" alt="pitcher!"/>
<img class="slider-image3" src="http://cdn.desktopwallpapers4.me/media/thumbs_400x250/3/23394.jpg" alt="pitcher!"/>
<img class="slider-image4" src="http://papers.co/wallpaper/papers.co-sd19-sand-storm-gradient-blur-8-wallpaper.jpg" alt="pitcher!"/>
<img class="slider-image5" src="http://m.rgbimg.com/cache1sw4YI/users/x/xy/xymonau/600/nxXqi9O.jpg" alt="pitcher!"/>
<img class="slider-image6" src="http://previews.123rf.com/images/hospitalera/hospitalera0805/hospitalera080500016/3089997-Halftone-blue-pattern-with-little-dots-and-some-zoom-blur-applied--Stock-Photo.jpg" alt="pitcher!"/>
</div>
<div class="first-viewport">
<a class="previous-slide-arrow" href="#"><</a>
<div class="navigation-bullets-container">
<a class="navigation-bullet1" href="javascript: changeImage(1)" >
<span>Bullet</span>
</a>
<a class="navigation-bullet2" href="javascript: changeImage(1)" >
<span>Bullet</span>
</a>
<a class="navigation-bullet3" href="javascript: changeImage(1)" >
<span>Bullet</span>
</a>
<a class="navigation-bullet4" href="javascript: changeImage(1)" >
<span>Bullet</span>
</a>
<a class="navigation-bullet5" href="javascript: changeImage(1)" >
<span>Bullet</span>
</a>
<a class="navigation-bullet6" href="javascript: changeImage(1)" >
<span>Bullet</span>
</a>
</div>
<a class="next-slide-arrow" href="#">></a>
</div>
2 issues :
Height
Your first-viewport has a height of 100%. When you work with % heights, know that the parent must have a height to so the % height of the children can be calculated.
In this case, you have to add html, body {height: 100%;}, which are the parents of first-viewport. (Honestly, it's not mandatory but you should do it as your div could have a zero height on some browsers.)
Background
Now, your <a> tags are actually taking the full height and are centered vertically, but you feel the opposite because of your background.
Now what you have to do is fixing your background position (since you're using the background property to display arrows).
a.previous-slide-arrow, a.next-slide-arrow {
background-position: center;
}
This simple line above should fix it.
If you want listen click event only on the arrow :
You must wrap your <a> element in div with display: table-cell.
And your <a> contain only your background arrow.
Alternatively:
Or you can apply a background-position: 50% 50% to center your background arrow in your element.
What is wrong with this code? I have been working on this for hours and cannot figure out why the button.png will now show up but the link is there in the location of the "one" div..?
#one
{
position: fixed;
left:225px;
top:702px;
}
.button
{
display: block;
width: 40px;
height: 40px;
background: url('images/button.png') bottom;
text-indent: -99999px;
}
.button:hover
{
background-position: 0 0;
background-color: transparent;
border-style: none;
}
_
<body>
<div id="map">
<img src="images/map.png"/>
</div>
<div id="one">
<a class="button" href="images/one.jpg"/>
<img src="images/button.png"/>
</a>
</div>
</body>
Your title is not really much related to your question .. so I'll just try to answer the question.
The image is not showing, because by default img is an inline element and you've set text-indent to -99999px.
You can either remove that text-indent or set the display of img to block:
.button img { display: block; }
I'm implementing pagination, and it needs to be centered. The problem is that the links need to be displayed as block, so they need to be floated. But then, text-align: center; doesn't work on them. I could achieve it by giving the wrapper div padding of left, but every page will have a different number of pages, so that wouldn't work. Here's my code:
.pagination {
text-align: center;
}
.pagination a {
display: block;
width: 30px;
height: 30px;
float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
To get the idea, what I want:
Removing floats, and using inline-block may fix your problems:
.pagination a {
- display: block;
+ display: inline-block;
width: 30px;
height: 30px;
- float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
(remove the lines starting with - and add the lines starting with +.)
.pagination {
text-align: center;
}
.pagination a {
+ display: inline-block;
width: 30px;
height: 30px;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
inline-block works cross-browser, even on IE6 as long as the element is originally an inline element.
Quote from quirksmode:
An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block.
this often can effectively replace floats:
The real use of this value is when you want to give an inline element a width. In some circumstances some browsers don't allow a width on a real inline element, but if you switch to display: inline-block you are allowed to set a width.” ( http://www.quirksmode.org/css/display.html#inlineblock ).
From the W3C spec:
[inline-block] causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
Since many years I use an old trick I learned in some blog, I'm sorry i don't remember the name to give him credits.
Anyway to center floating elements this should work:
You need a structure like this:
.main-container {
float: left;
position: relative;
left: 50%;
}
.fixer-container {
float: left;
position: relative;
left: -50%;
}
<div class="main-container">
<div class="fixer-container">
<ul class="list-of-floating-elements">
<li class="floated">Floated element</li>
<li class="floated">Floated element</li>
<li class="floated">Floated element</li>
</ul>
</div>
</div>
the trick is giving float left to make the containers change the width depending on the content. Than is a matter of position:relative and left 50% and -50% on the two containers.
The good thing is that this is cross browser and should work from IE7+.
Centering floats is easy. Just use the style for container:
.pagination{ display: table; margin: 0 auto; }
change the margin for floating elements:
.pagination a{ margin: 0 2px; }
or
.pagination a{ margin-left: 3px; }
.pagination a.first{ margin-left: 0; }
and leave the rest as it is.
It's the best solution for me to display things like menus or pagination.
Strengths:
cross-browser for any elements (blocks, list-items etc.)
simplicity
Weaknesses:
it works only when all floating elements are in one line (which is usually ok for menus but not for galleries).
#arnaud576875 Using inline-block elements will work great (cross-browser) in this case as pagination contains just anchors (inline), no list-items or divs:
Strengths:
works for multiline items.
Weknesses:
gaps between inline-block elements - it works the same way as a space between words. It may cause some troubles calculating the width of the container and styling margins. Gaps width isn't constant but it's browser specific (4-5px).
To get rid of this gaps I would add to arnaud576875 code (not fully tested):
.pagination{ word-spacing: -1em; }
.pagination a{ word-spacing: .1em; }
it won't work in IE6/7 on block and list-items elements
Set your container's width in px and add:
margin: 0 auto;
Reference.
Using Flex
.pagination {
text-align: center;
display:flex;
justify-content:center;
}
.pagination a {
display: block;
width: 30px;
height: 30px;
float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
text-align: center;
float: none;
I think the best way is using margin instead of display.
I.e.:
.pagination a {
margin-left: auto;
margin-right: auto;
width: 30px;
height: 30px;
background: url(/images/structure/pagination-button.png);
}
Check the result and the code:
http://cssdeck.com/labs/d9d6ydif
You can also do this by changing .pagination by replacing "text-align: center" with two to three lines of css for left, transform and, depending on circumstances, position.
.pagination {
left: 50%; /* left-align your element to center */
transform: translateX(-50%); /* offset left by half the width of your element */
position: absolute; /* use or dont' use depending on element parent */
}
.pagination a {
display: block;
width: 30px;
height: 30px;
float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
IE7 doesn't know inline-block.
You must add:
display:inline;
zoom: 1;
Add this to you styling
position:relative;
float: left;
left: calc(50% - *half your container length here);
*If your container width is 50px put 25px, if it is 10em put 5em.
<!DOCTYPE html>
<html>
<head>
<title>float object center</title>
<style type="text/css">
#warp{
width:500px;
margin:auto;
}
.ser{
width: 200px;
background-color: #ffffff;
display: block;
float: left;
margin-right: 50px;
}
.inim{
width: 120px;
margin-left: 40px;
}
</style>
</head>
<body>
<div id="warp">
<div class="ser">
<img class="inim" src="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">
</div>
<div class="ser">
<img class="inim" sr`enter code here`c="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">
</div>
</div>
</body>
</html>
step 1
create two or more div's you want and give them a definite width like 100px for each then float it left or right
step 2
then warp these two div's in another div and give it the width of 200px. to this div apply margin auto.
boom it works pretty well. check the above example.
Just adding
left:15%;
into my css menu of
#menu li {
float: left;
position:relative;
left: 15%;
list-style:none;
}
did the centering trick too
I have an image inside a span tag, the span has a set width and height, and is set to overflow hidden. so it only reveals a small portion of the image. This works but the small portion of the image that is visible is the top left corner. I would like it to be the center of the image that is visible. I think I need to absolutely position the image, but the size of the image can vary though. Does anyone know how to do what I am trying to do?
Thanks!
Here is the HTML:
<div class="lightbox_images">
<h6>Alternate Views</h6>
<span>
<a href="http://www.kranichs.com/mothers_rings/mothers_rings_txt2.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 1">
<img src="http://www.kranichs.com/mothers_rings/mothers_rings_txt2.jpg" />
</a>
</span>
<span>
<a href="https://www.kranichs.com/product_images/Simon-G#346_M_346_M.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 2">
<img src="https://www.kranichs.com/product_images/Simon-G#346_M_346_M.jpg" />
</a>
</span>
<span>
<a href="http://www.kranichs.com/images/simong/sim_banner_01.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 3">
<img src="http://www.kranichs.com/images/simong/sim_banner_01.jpg" />
</a>
</span>
<span>
<a href="http://www.kranichs.com/images/psu/psu_banner.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 4">
<img src="http://www.kranichs.com/images/psu/psu_banner.jpg" />
</a>
</span>
</div>
Here is the CSS:
.lightbox_images{
background-color:#F9F9F9;
border:1px solid #F0F0F0;
}
.lightbox_images h6{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#333333;
font-size:14px;
font-weight:bold;
font-style:italic;
text-decoration:none;
margin:0px;
}
.lightbox_images span{
padding:5px;
padding-bottom:15px;
background-color:#DFDFDF;
margin:5px;
display:inline-block;
border:1px solid #CCC;
}
.lightbox_images a{
display:inline-block;
width:60px;
height:60px;
overflow:hidden;
position:relative;
}
.lightbox_images a img{
position:absolute;
left:-50%;
top:-50%;
}
.lightbox_images span:hover{
border:1px solid #BBB;
background-color:#CFCFCF;
}
As proposed in https://stackoverflow.com/a/14837947/2227298 by Billy Moat, there is a solution without knowing the image height and width.
Try it here: http://jsfiddle.net/LSKRy/
<div class="outer">
<div class="inner">
<img src="http://3.bp.blogspot.com/-zvTnqSbUAk8/Tm49IrDAVCI/AAAAAAAACv8/05Ood5LcjkE/s1600/Ferrari-458-Italia-Nighthawk-6.jpg" alt="" />
</div>
</div>
.outer {
width: 300px;
overflow: hidden;
}
.inner {
display: inline-block;
position: relative;
right: -50%;
}
img {
position: relative;
left: -50%;
}
Given this sort of HTML:
<span><img src="..." width="..." height="..." alt="..." /></span>
You could use CSS like this:
span {
position: relative;
display: block;
width: 50px; /* Change this */
height: 50px; /* Change this */
overflow: hidden;
border: 1px solid #000;
}
span img {
position: absolute;
left: -10px; /* Change this */
top: -10px; /* Change this */
}
You can then center the image based on its exact dimensions.
Alternatively, if you're able to modify the HTML, you could instead use something like this:
<div>
[name of picture]
</div>
Then, match it with this CSS:
div {
width: 50px;
height: 50px;
background: transparent url(...) center center no-repeat;
border: 1px solid #000;
}
div a {
display: block;
height: 100%;
text-indent: -9999em; /* Hides the link text */
}
In this case, the background will be automatically centered regardless of its dimensions, and it'll still be clickable.
This example, the images are at the center of the element, regardless of its size
HTML:
<div class="box">
<img src="example.jpg">
</div>
CSS:
div.box{
width: 100px;
height: 100px
overflow: hidden;
text-align: center;
}
div.box > img{
left: 50%;
margin-left: -100%;
position: relative;
width: auto !important;
height: 100px !important;
}
If the width and height of the image varies, I think the only way to do this is with javascript.
Style the image to left:50%; top:50%; and then, use javascript (image onload event maybe) to add margin-left:-imageWidth/2 px; margin-top:-imageHeight/2 px;
So basically you have
span img {
position: absolute;
left: 50%;
top: 50%;
}
and the following js
window.onload = function() {
var images = document.getElementsByTagName('img');
for(i=0; i<images.length; i++)
images[i].onload = centerImage(images[i]);
function centerImage(img) {
img.style.marginLeft = -(img.width/2) + "px";
img.style.marginTop = -(img.height/2) + "px";
}
}
PS. If you're using a javascript framework/library the code could simplify a bit, but I didn't make that assumption.
You can set the image as the background of the element and set x,y axis as in the following example:
#mySpan {
background-image: url(myimage.png);
background-repeat: no-repeat;
background-attachment:fixed;
background-position: -10 -10
}