Question

我是css的新手，我正试图在div元素中激活地对齐我的图像。

我尝试浮动并显示：内联但仍然是垂直对齐。

#maincontainer {
   left : 50px;
 top : 80px;
 width : 300px;
 height : 100px;
 border : solid 2px #0f0f0f;
 position : absolute;
 overflow : scroll;

 }

 #maincontainer img {
    top : 10px;
    left : 10px;
    width : 80px;
    height : 80px;
    padding : 10px;
    position :relative; 
    float : left; 
   }

请帮忙告诉我，如果我错了。

Answer 1

display: block;
margin-left: auto;
margin-right: auto

Answer 2

水平对齐
HTML

<div id="maincontainer">
    <img />
</div>

CSS

 #maincontainer {
     width : 300px;
     height : 100px;
     border : solid 2px #0f0f0f;
     }
     #maincontainer img {
        width : 80px;
        height : 80px;
        margin:0 auto;
        display:block;
        background:red;
    }

垂直和水平对齐
HTML

 <div id="maincontainer">
        <div><img /></div>
    </div>

CSS

 #maincontainer {
     width : 300px;
     height : 100px;
     border : solid 2px #0f0f0f;
     display:table;
     }
     #maincontainer div img {
        width : 80px;
        height : 80px;
        background:red;
        display:inline-block;
    }
    #maincontainer div{
     display:table-cell;
       text-align: center;
        vertical-align: middle;
    }

只需删除背景：来自img的红色

Answer 3

只要父容器的宽度足以容纳图像，它们就会自然并排放置。当图像行对于容器变得太宽时，图像将开始包裹到新的文本行。

此外，空格（空格，制表符和换行符）将呈现为两个图像之间的文本空间。为防止这种情况发生，请确保IMG标记之间没有空白字符。

通过在父元素上设置CSS white-space: nowrap;，可以强制图像溢出父容器的宽度。如果容器太窄，这可能会导致不良影响，但也可以通过将overflow: auto;添加到包含元素来创建水平滚动条。

最后，图片代码可以有vertical-align CSS属性。默认情况下为vertical-align: baseline;。这会在图像下方创建几个像素的空白区域。您可以通过为CSS中的图像设置vertical-align: top;来解决此问题。

有关图片的一些示例，请参阅this fiddle。

Answer 4

如果您的div足够宽，可以将所有图像包含在一行中，那么您可以尝试这样的操作：

#maincontainer img {
float:left;
margin-right:10px;
}

直播：http://tinkerbin.com/mIBcXNcS 这是基本代码，但它可能会因您的HTML代码而异....

Answer 5

您好现在根据此

更改您的位置

现在定义您的父位置relative，并将其提供给孩子absolute

#maincontainer {
 position : relative;
 }

 #maincontainer img {
    position :absolute; 
   }

-----

我想你想要这个

现在更改properties

的部分css

现在添加 您父母的margin-top和margin-left 删除 top或left id maincontainer

就像这个

一样

#maincontainer {
 width : 300px;
 height : 100px;
  margin-top:80px;
  margin-left:50px;
 border : solid 2px #0f0f0f;
 position : relative;
 overflow : scroll;

 }

 #maincontainer img {
    top : 10px;
    left : 10px;
    width : 80px;
    height : 80px;
    padding : 10px;
    position :absolute; 
  vertical-align:top;
   }

的 Live Demo 的

Answer 6

您需要将display:block;应用于IMG元素才能使浮点数生效。内联元素不能浮动。
或者，将IMG定义为display:inline-block;，但请注意旧浏览器不支持此功能
作为旁注，尽可能避免在CSS中定义高度（或使用min-height）。与宽度不同，许多元素（尤其是主容器）的高度应该是灵活的。

CSS水平对齐图像

6 个答案:

-----