有一块225px。在里面你插入一个大尺寸的图片（850px）。她出去了。
看起来像这样：
.content {display: inline-block;}
.column {float:right; width:225px;}
.slider {
border: 1px solid;
width: 220px;
padding: 5px;
}
.single-slide img {
width: auto;
}<div class="content">
<div class="column">
<div class="slider single-slide">
<div><img src='https://s-media-cache-ak0.pinimg.com/736x/2c/d0/19/2cd0197c5eb8c1f84e81734f97e80cd3.jpg' /></div>
<div>to place the center of the image</div>
</div>
</div>
</div>
使用slick slider。我想添加点来控制滑块。
当我添加点时，它们被放置在块的中间。没关系，我明白了。 但我想将它们放在图片的中心。 怎么做？
UPD：图像超出了区块，这是正确的！我需要做的是点位于图像的中心，而不是块
答案 0 :(得分：0)
我看到你的圆点位于窗口的中心。 为此，您的圆点列表必须位于具有图像宽度的容器内。
我认为您应该放大滑块或使用max-width: 100%;
答案 1 :(得分：0)
如果您想在框中需要图像，请更改
.single-slide img { width: auto;}
到
.single-slide img { max-width: 100%;}
答案 2 :(得分：0)
已更新： inherit 关键字指定属性从其父元素<{>继承其值<{ {3}}]。和图像不能成为父元素。见Source。
以下是基于您最新更新的继承和排名的解决方案。 请参阅html部分我添加了一个类＆＃34; img-holder＆＃34;在div上持有img并添加一个类＆＃34; div_center＆＃34;在div上包含文字＆＃39; s。
img 从父div 类＆＃34; img-holder＆＃34;继承宽度。 ＆＃34; IMG-保持器＆＃34;和＆＃34; div_center＆＃34;从父div类滑块继承宽度。
N.B：如果设置img宽度，自动文本将始终位于div类滑块的中心。
.content {
display: inline-block;
}
.column {
float: right;
width: 225px;
}
.slider {
border: 1px solid #000;
width: 220px;
padding: 5px;
position:relative;
}
.img-holder {
width: inherit;
}
.img-holder img {
width: inherit;/*width auto default value. The browser calculates the width*/
}
.div_center {
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
} <div class="content">
<div class="column">
<div class="slider single-slide">
<div class="img-holder">
<img src='https://s-media-cache-ak0.pinimg.com/736x/2c/d0/19/2cd0197c5eb8c1f84e81734f97e80cd3.jpg' />
</div><!--./ img-holder -->
<div class="div_center">
to place the center of the image
</div><!--end of txt_center -->
</div><!--./ slider single-slide-->
</div><!--./ column -->
</div><!--./ content -->
上一页：光滑点类的绝对位置，但您没有为此设置任何相对位置。所以你需要添加相对于幻灯片div的位置。 并使图像响应。我在css部分添加了图像的响应属性，并在li上添加了边框以便清晰显示。
.content {display: inline-block;}
.column {float:right; width:225px;}
.slider {
border: 1px solid;
width: 220px;
padding: 5px;
position: relative;
}
.single-slide img {
max-width:100%;
display:block;
height:auto;
margin:0 auto;
}
.slick-dotted.slick-slider
{
margin-bottom: 30px;
}
.slick-dots
{
position: absolute;
top:50%;
left:0;
right:0;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
border:2px solid red;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
right: 0;
bottom: 0;
left: 0;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 12px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
opacity: .75;
color: black;
}<div class="content">
<div class="column">
<div class="slider single-slide">
<div><img src='https://s-media-cache-ak0.pinimg.com/736x/2c/d0/19/2cd0197c5eb8c1f84e81734f97e80cd3.jpg' /></div>
<ul class="slick-dots">
<li class="active"><button></button></li>
<li><button></button></li>
<li><button></button></li>
</ul>
</div>
</div>
</div>