Question

我试图将图像置于每个<li>中心而没有任何成功。

我尝试使用display: table;标记上的<ul>和display: table-cell;上的<li>。

我尝试使用display: table;标记上的<li>和display: table-cell;标记上的<img>。

这两种方法都不奏效。

<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/

Answer 1

这是因为float: left;元素上的<li>。尝试删除它，只需添加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;
}

Answer 2

JSFIDDLE

在您的代码中，将此position: relative添加到.slider .slide。然后添加到.slides img

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

Answer 3

只需添加与高度相同的行高，并添加vertical-align：middle;到.slide类和图像本身：

jsfiddle.net/8b47wong/5 /

Answer 4

不确定这是否有帮助，但我已经改变了一些事情（详情如下）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;
}

我将display:table添加到您的div，display:table-row添加到您的ul，display:cell;vertical-align:middle;添加到您的li。我删除了一些与新修正案无关的其他内容，但我不记得所有内容：P

Answer 5

通常您可以使用以下方式垂直居中图像：

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

但是在你的情况下，如果这是一个滑块/轮播，可能<li>标签将向左浮动，然后display: table-cell和vertical-align: middle将无效。

你可以做的另一件事是将图像包裹在div并放置一些高度......例如：

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; }

和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>

Answer 6

将以下内容添加到.slides img类中： position: relative; top:50; transform: translateY(-50%);

像这样： http://jsfiddle.net/8b47wong/7/

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 7

请更新您的代码需要添加这些代码http://screen.w3.ua/Mar15/14019014.jpg 检查这个小提琴http://jsfiddle.net/8b47wong/1/

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如何在<li> s？</li>上使用vertical-align属性

7 个答案:

HTML

CSS