如何使一个图像中心(垂直和水平)在一个更大的div

我有一个div 200x200px。我想在div的中间放置一个50 x 50 px的图像。

怎样才能做到呢?

我能够得到它的中心水平使用文本对齐:中心的div。但垂直对齐是问题..

当前回答

你可以使用以下属性轻松做到这一点:

#内容{ 显示:flex; 对齐项目:中心; 宽度:200 px; 身高:200 px; 边框:1px纯红色; ｝ # myImage { 显示:块; 宽度:50 px; 高度:50 px; 保证金:汽车; 边框:1px纯黄色; ｝ < div id = "内容" > <img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png"> < / div >

引用:W3

2015-12-07 18:41:50

其他回答

在div中

style="text-align:center; line-height:200px"

2008-12-23 04:48:40

当然，另一种方法是使用valign创建一个表。不管你是否知道div的高度，这都可以工作。

<div>
   <table width="100%" height="100%" align="center" valign="center">
   <tr><td>
      <img src="foo.jpg" alt="foo" />
   </td></tr>
   </table>
</div>

但只要可能，您应该始终坚持只使用CSS。

2008-12-23 05:23:48

我有一个图片库，我不知道准确的高度或宽度的图像之前，我只知道他们是小于div，他们将被包含。

通过在容器上组合行高设置并在图像元素上使用vertical-align:middle，我最终使用以下HTML标记和以下CSS使其在FF 3.5、Safari 4.0和IE7.0上工作。

HTML标记

<div id="gallery">
    <div class="painting">
        <a href="Painting/Details/2">
            <img src="/Content/Images/Paintings/Thumbnail/painting_00002.jpg" />
        </a>
    </div>
    <div class="painting">
        ...
    </div>
    ...
 </div>

CSS

div.painting
{
    float:left;

    height:138px; /* fixed dimensions */
    width: 138px;

    border: solid 1px white;
    background-color:#F5F5F5;


    line-height:138px;    
    text-align:center;

}

    div.painting a img
    {
        border:none;
        vertical-align:middle;

    }

2009-09-23 23:36:38

这对我来说很管用:

<body>
  <table id="table-foo">
    <tr><td>
        <img src="foo.png" /> 
    </td></tr>
  </table>
</body>
<style type="text/css">
  html, body {
    height: 100%;
  }
  #table-foo {
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
  }
  #table-foo img {
    display: block;
    margin: 0 auto;
  }
</style>

2011-09-18 18:03:35

我一直在尝试用hmtl和css让图像在圆形内垂直和水平居中。

在结合了这篇文章中的几个观点后，我得出了以下结论:jsFiddle

下面是三列布局中的另一个示例:jsFiddle

CSS:

#circle {
width: 100px;
height: 100px;
background: #A7A9AB;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin: 0 auto;
position: relative;
}

.images {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

HTML:

<div id="circle">
<img class="images" src="https://png.icons8.com/facebook-like-filled/ios7/50" />
</div>

2016-09-16 00:50:54

如何使一个图像中心(垂直和水平)在一个更大的div

推荐文章

最新文章

标签