4

我正在学习用css设计照片。我将照片居中，但是当我通过将其原始尺寸减半来调整它的大小时，左右边框不会环绕图像。边框的顶部和底部是正确的。

我还没有找到任何类似问题的教程或回复，我很感激你对解决这个问题的想法。

.img {
         text-align:center;
         margin-top:80px;
         margin-bottom:0px;
         padding:0px;
         border:4px solid #F2F2F2;
         }

示例网站位于http://nspowers.org。使用的完整样式表的链接是http://nspowers.org/stylesheet/stylesimgquestion.css，图像属性位于最底部。

谢谢

4

2 回答 2

2

您不是在设置图像本身的样式，而是对内部包含图像的容器 div 进行样式设置。如果您将 CSS 的选择器从.img哪些目标元素与该类 img更改为img（注意缺少的点），您将定位所有图像。

或者，如果您想更具体一点，您可以通过调用将其添加到具有特定类的img.myClass所有图像中，这将针对所有具有类的图像myClass。

尽管我建议您不要将其.img用作类名，因为它可能会造成混淆。

更新

这是代码的完整示例，没有来自其他类和元素的所有混乱。您可以在这个小提琴中查看现场演示

HTML

<div class='centered'>
<img src='http://nspowers.org/excomm_photo.jpg' height="251" width="380"/>
</div>​

CSS

.centered{
    text-align:center;
}

.centered img{
    border:5px solid blue;
}​
于 2012-12-15T03:10:05.733 回答
0

您已将边框添加到图像周围的 div 中，而不是图像本身，这就是问题所在。

一种解决方法是添加以下内容：

.img {
     text-align:center;
     margin-top:80px;
     margin-bottom:0px;
     padding:0px;
 }

 .img > img{border:4px solid #F2F2F2;}
于 2012-12-15T03:09:13.643 回答