22

我是 CSS 新手，我正在尝试将我的图像水平对齐在 div 元素内。

我尝试了 float 和 display: inline 但它们仍然垂直对齐。

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

如果我在哪里错了，请帮助并告诉我。

4

6 回答 6

17 
display: block;
margin-left: auto;
margin-right: auto
于 2014-01-13T21:43:24.103 回答
8

水平对齐的
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 中删除 background:red

于 2012-11-20T11:15:02.833 回答
4

只要父容器对图像足够宽，它们自然会并排放置。当图像行变得对于容器来说太宽时，图像将开始换行到新的文本行。

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

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

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

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

于 2012-11-20T08:17:39.540 回答
1

如果您的 div 足够宽以在一行中包含所有图像，那么您可以简单地尝试这样的事情：

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

现场观看： http: //tinkerbin.com/mIBcXNcS 这是基本代码，但可能因您的 html 代码而异......

于 2012-11-20T07:52:22.207 回答
0

你好 现在根据这个换成你的位置

现在定义你的父母位置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;
   }

现场演示

于 2012-11-20T07:14:14.530 回答
0
  1. 您需要应用display:block;到 IMG 元素才能使浮动生效。内联元素不能浮动。
  2. 或者，将 IMG 定义为display:inline-block;，但请注意旧版浏览器不支持此功能
  3. 作为旁注，尽量避免在 CSS 中定义高度（或使用最小高度）。与宽度不同，许多元素的高度，尤其是主容器，应该是灵活的。
于 2012-11-21T20:05:00.313 回答