0

I am trying to center the image in every <li> without any success.

I tried using display: table; on the <ul> tag and display: table-cell; on the <li>.

I tried using display: table; on the <li> tag and display: table-cell; on the <img> tag.

Neither of these approaches worked. 

<div class="slider-container"> <div class="scroll-left"></div> <div class="slider"> <ul class="slides"> <li class="slide"> <img src="http://exaple.com/Button.png" class="makeBig"> </li> <li class="slide"> <img src="http://exaple.com/Button.png" class="makeSmall"> </li> <li class="slide"> <img src="http://exaple.com/wp-content/themes/twentyfifteen-child/images/ginger_Button.png" class="makeBig"> </li> <li class="slide"> <img src="http://exaple.com/Button.png" class="makeSmall"> </li> <li class="slide"> <img src="http://exaple.com/Button.png" class="makeBig"> </li> </ul> </div> <div class="scroll-right"></div> </div>

jsfiddle: http://jsfiddle.net/8b47wong/

Improve this question

7 Answers 7

Reset to default
2

This is because of your float: left; on your <li> element. Try to remove it and just add display: table-cell; vertical-align: middle;

http://jsfiddle.net/8b47wong/4/

.slider .slide { list-style-type: none; width: 19.26em; height: 11.1em; padding: 0!important; text-align: center; border: 1px solid red; display: table-cell; vertical-align: middle; }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

JSFIDDLE

In you code add this position: relative to .slider .slide. Then add to .slides img 

position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
Improve this answer

Comments

1

Just add the same line-height as the height and add vertical-align: middle; to the .slide class and the image itself:

jsfiddle.net/8b47wong/5/

Improve this answer

Comments

1

Not sure whether this will help or not, but I've changed a few things (details below) http://jsfiddle.net/8b47wong/2/

HTML

<div class="slider-container"> <div class="slider"> <ul class="slides"> <li class="slide"> <img src="http://upload.wikimedia.org/wikipedia/commons/1/1f/Amarok-icon.png" class="makeBig" /> </li> <li class="slide"> <img src="http://upload.wikimedia.org/wikipedia/commons/1/1f/Amarok-icon.png" class="makeSmall" /> </li> <li class="slide"> <img src="http://upload.wikimedia.org/wikipedia/commons/1/1f/Amarok-icon.png" class="makeBig" /> </li> <li class="slide"> <img src="http://upload.wikimedia.org/wikipedia/commons/1/1f/Amarok-icon.png" class="makeSmall" /> </li> <li class="slide"> <img src="http://upload.wikimedia.org/wikipedia/commons/1/1f/Amarok-icon.png" class="makeBig" /> </li> </ul> </div> </div>

CSS

.slider-container { /* padding-top: 20em; */ position: relative; border: 1px solid black; } .slider { width: 69.8em; height: 13.5em; overflow: hidden; /* border: 1px solid black; */ margin: 0 auto; display:table; } .slider .slides { width: 400em; height: 13.5em; margin: 0; padding: 0; margin-left: -69.7em; display:table-row; } .slider .slide { width: 19.26em; height: 11.1em; padding: 0!important; /* border: 1px solid red; */ text-align: center; border: 1px solid red; vertical-align:middle; display:table-cell; } .slides img { transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; } .scroll-left { background-image: url('http://png-3.findicons.com/files/icons/2232/wireframe_mono/48/arrow_left.png'); background-repeat: no-repeat; background-size: 100%; width: 180px; height: 100px; position: absolute; top: 3.2em; left: 16em; cursor: pointer; } .scroll-right { background-image: url('http://png-3.findicons.com/files/icons/2232/wireframe_mono/48/arrow_right.png'); background-size: 100%; background-repeat: no-repeat; width: 180px; height: 100px; position: absolute; top: 3.2em; right: 16em; cursor: pointer; }

I added display:table to your div, display:table-row to your ul, and display:cell;vertical-align:middle; to your li. I removed a few other things as well that didn't tie in with the new amendments but I can't remember all of them :P

Improve this answer

Comments

1

Usually you can center vertically the images by using:

ul { display: table; } ul li { display: table-cell; vertical-align: middle; } ul li img { display: block; margin: 0 auto; }

BUT in your case if that's a slider/carousel, probably the <li> tags will be floated left and then display: table-cell and vertical-align: middle will not work.

Another thing you can do is to wrap the images in a div and put some height... e.g:

ul li { float: left; display: table; } ul li div { display: table-cell; height: 200px; vertical-align: middle; } ul li div img { display: block; margin: 0 auto; }

and the HTML:

<div class="slider-container"> <div class="scroll-left"></div> <div class="slider"> <ul class="slides"> <li class="slide"> <div><img src="http://exaple.com/Button.png" class="makeBig"></div> </li> <li class="slide"> <div><img src="http://exaple.com/Button.png" class="makeSmall"></div> </li> <li class="slide"> <div><img src="http://exaple.com/wp-content/themes/twentyfifteen-child/images/ginger_Button.png" class="makeBig"></div> </li> <li class="slide"> <div><img src="http://exaple.com/Button.png" class="makeSmall"></div> </li> <li class="slide"> <div><img src="http://exaple.com/Button.png" class="makeBig"></div> </li> </ul> </div> <div class="scroll-right"></div> </div>
Improve this answer

Comments

1

Add the following to your .slides img class: position: relative; top:50; transform: translateY(-50%);

Like so: http://jsfiddle.net/8b47wong/7/

.slider-container { /* padding-top: 20em; */ position: relative; border: 1px solid black; } .slider { width: 69.8em; height: 13.5em; overflow: hidden; /* border: 1px solid black; */ margin: 0 auto; } .slider .slides { display: block; width: 400em; height: 13.5em; margin: 0; padding: 0; float: inherit !important; margin-left: -69.7em; } .slider .slide { float: left; list-style-type: none; width: 19.26em; height: 11.1em; padding: 0!important; /* border: 1px solid red; */ text-align: center; border: 1px solid red; } .slides img { transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; transform: translateY(-50%); top: 50%; position: relative; }
<div class="slider-container"> <div class="slider"> <ul class="slides"> <li class="slide"> <img src="http://upload.wikimedia.org/wikipedia/commons/1/1f/Amarok-icon.png" class="makeBig"/> </li> <li class="slide"> <img src="http://upload.wikimedia.org/wikipedia/commons/1/1f/Amarok-icon.png" class="makeSmall"/> </li> <li class="slide"> <img src="http://upload.wikimedia.org/wikipedia/commons/1/1f/Amarok-icon.png" class="makeBig"/> </li> <li class="slide"> <img src="http://upload.wikimedia.org/wikipedia/commons/1/1f/Amarok-icon.png" class="makeSmall"/> </li> <li class="slide"> <img src="http://upload.wikimedia.org/wikipedia/commons/1/1f/Amarok-icon.png" class="makeBig"/> </li> </ul> </div> </div>

Improve this answer

Comments

-3

Please update your code Need to add these code http://screen.w3.ua/Mar15/14019014.jpg Check this fiddle http://jsfiddle.net/8b47wong/1/

.slider-container { /* padding-top: 20em; */ position: relative; border: 1px solid black; } .slider { width: 69.8em; height: 13.5em; overflow: hidden; /* border: 1px solid black; */ margin: 0 auto; } .slider { width: 69.8em; height: 13.5em; overflow: hidden; /* border: 1px solid black; */ margin: 0 auto; } .slider .slides { display: block; width: 400em; height: 13.5em; margin: 0; padding: 0; float: inherit!important; margin-left: -69.7em; } .slider .slide { float: left; list-style-type: none; width: 19.26em; height: 11.1em; padding: 0!important; /* border: 1px solid red; */ text-align: center; border: 1px solid red; white-space: nowrap; } .slider .slide:after{ content: ''; display: inline-block; vertical-align: middle; height: 100%; margin-right: -0.25em; } .slides img { transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; display: inline-block; vertical-align: middle; white-space: normal; } .scroll-left { background-image: url('http://png-3.findicons.com/files/icons/2232/wireframe_mono/48/arrow_left.png'); background-repeat: no-repeat; background-size: 100%; width: 180px; height: 100px; position: absolute; top: 3.2em; left: 16em; cursor: pointer; } .scroll-right { background-image: url('http://png-3.findicons.com/files/icons/2232/wireframe_mono/48/arrow_right.png'); background-size: 100%; background-repeat: no-repeat; width: 180px; height: 100px; position: absolute; top: 3.2em; right: 16em; cursor: pointer; }
<div class="slider-container">	<div class="slider">	<ul class="slides">	<li class="slide">	<img src="http://upload.wikimedia.org/wikipedia/commons/1/1f/Amarok-icon.png" class="makeBig">	</li>	<li class="slide">	<img src="http://upload.wikimedia.org/wikipedia/commons/1/1f/Amarok-icon.png" class="makeSmall">	</li>	<li class="slide">	<img src="http://upload.wikimedia.org/wikipedia/commons/1/1f/Amarok-icon.png" class="makeBig">	</li>	<li class="slide">	<img src="http://upload.wikimedia.org/wikipedia/commons/1/1f/Amarok-icon.png" class="makeSmall">	</li>	<li class="slide">	<img src="http://upload.wikimedia.org/wikipedia/commons/1/1f/Amarok-icon.png" class="makeBig">	</li>	</ul>	</div>	</div>

Improve this answer

2 Comments

Please point out what he should change, rather than just repasting an entire block of code.
@kumar You need to post the actual code changes rather than a link to an image. That image may disappear off the internet and then your post will become useless.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.