Reputation: 4747
What options (if any) do I have to centre the image within the li
tag? What I have is an oversized image deliberately placed into a smaller sized li. What I am trying to achieve is the image centred within the li tag ... ie so that the cropped overflow would be shared on both the left and right, not just the right. The code below is a reduced version of what I am working with.
HTML
<ul>
<li>
<img src = "http://placehold.it/400x100">
</li>
</ul>
CSS
li{
overflow:hidden;
width: 250px;
}
img {
border: 3px solid pink;
}
The codepen is here http://codepen.io/anon/pen/ebCEi. Note: I wont be able to use background images.
Upvotes: 1
Views: 74
Reputation: 208040
li {
overflow:hidden;
width: 250px;
position:relative;
height:106px;
}
img {
border: 3px solid pink;
position:absolute;
left:-75px;
}
You'll notice the left and right border on the image isn't visible because it extends beyond the viewport of the list item.
Upvotes: 2
Reputation: 9468
Try this:
HTML
<ul>
<li>
<img src = "http://placehold.it/400x100">
</li>
</ul>
CSS
li{
overflow:hidden;
text-align:center;
width: 250px;
}
img {
border: 3px solid pink;
margin:0 auto;
}
Upvotes: 0
Reputation: 16705
Use text-align
:
li {
overflow:hidden;
text-align: center; /* <------- */
width: 250px;
}
If that doesn't work try this:
img {
border: 3px solid pink;
margin: 0 auto; /* <------- */
}
Upvotes: 0