在居中页面上显示带边框的图像答案

【问题标题】：Display image with border on centered page在居中页面上显示带边框的图像
【发布时间】：2012-09-11 16:43:50
【问题描述】：

我正在尝试显示以页面为中心的图像，该页面的边框应该在其一侧具有不同的填充和边距。图像将具有不同的宽度和高度。所以我需要它相应地伸展。

我把它放在正文中以删除所有边距：

body {
    margin:0px 0px;
    padding: 0px;
    }

然后我用它在图像周围设置边框。

#imgcontainer {
    position:relative;
    text-align: center;
    border-color: red;
    border-width: 1px;
    border-style: solid;
    padding: 5px;
}

然后边框延伸到整个页面。有什么办法可以阻止他的吗？如果我说：

position:relative;

边框对齐到位，但图像不再居中。

如果我在#imgcontainer 周围放置一个容器框，它也会吸附到页面边缘。

我认为它可以简单地通过一些位置组合来解决：相对/绝对？

这就是我要说的：http://kareldc.com/dislexicon/1-motion.html

谢谢！

【问题讨论】：

请添加html代码......

标签： css image position border scaling

【解决方案1】：

嗨，现在根据@Fabrizo Calderan 定义

css 像这样

#imgcontainer {
display:inline-block;
vertical-align:top; 
}

比你的结果是

【讨论】：

【解决方案2】：

如果我很好理解问题，您可以将display: inline-block 分配给#imgcontainer，否则发布一个显示问题的小提琴

【讨论】：

您是否尝试过应用我的建议？是不是想要的效果？
是的，然后#imgcontainer 会捕捉到顶部。 kareldc.com/dislexicon/1-motion2.html
抱歉，但尚不清楚您究竟想要获得什么：您想将容器水平和垂直居中吗？
带垂直对齐：顶部；它似乎奏效了。谢谢！ @Rohit Azad

【解决方案3】：

你可以只对 img 标签应用边框效果。

例如，只要放

#imgcontainer img { 
      border-color: red;
      border-width: 1px;
      border-style: solid;
     }

【讨论】：

【解决方案4】：

这是给你的答案：fiddle example

【讨论】：