发表新帖
发表新帖

vertical alignment of image inside a div

前端 未结
关注
6 863
星月不相逢
星月不相逢 2020-12-16 00:36

I want to set vertical alignment of image inside a div. I use img { vertical-align:middle} but it is not working.

相关标签:
6条回答
  • 耶瑟儿～
    2020-12-16 00:52

    The following post has some useful references:

    Text Alignment w/ IE9 in Standards-Mode

    Also, depending on which version of IE you are testing against, you may end up needing some browser-specific hacks or some jQuery/JavaScript code.

    If you have to, use a one-row-one-cell table and take advantage of the vertical-align property. This is brute-force, not overly semantic, but it works.

    0 讨论(0)
  • 梦谈多话
    2020-12-16 00:56

    Using the line-height property will solve the problem:

    <style> 
.someclass {
  width: 300px;
  height: 300px;
  text-align: center;
  line-height: 300px;
  border: dotted;
}
.someclass img {
  margin: auto;
  vertical-align: middle;
}
</style>
<div class="someclass"> 
  <img src="someimg.jpg" border="0" alt=""> 
</div>
    0 讨论(0)
  • 南旧
    2020-12-16 00:58

    If you're trying to do what I think, vertical align isn't going to work; you'll need to use positioning.

    In general, position the container relative, and then position the image absolute, with top and left set to 50%, and then move the image back to the center by setting negative margins equal to half the width / height.

    Here's a working example: http://jsbin.com/evuqo5/edit

    Basic CSS is this:

    #container { position: relative; }
#container img {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: /* -1/2 the height of the image */
  margin-left: /* -1/2 the width of the image */
}
    0 讨论(0)
  • 后悔当初
    2020-12-16 01:03

    If you set the div display attribute to table-cell then vertical-align: middle; will work.

    The vertical-align rule only affects table cells or elements with display: table-cell.

    See this article from SitePoint for a detailed explanation.

    <style>
/* change body to .someClasses's parent */

body {
  width: 100%;
  height:  100%;
  display: table;
}
body > .someclass {
    width: 300px;
    height: 300px;
    text-align: center;
    border:dotted;
    margin: 0 auto
    display: table-cell;
    vertical-align: middle;
}
</style>

<body>
    <div class="someclass"> 
        <img src="someimg.jpg" border="0" alt=""> 
    </div>
</body>
    0 讨论(0)
  • 我在风中等你
    2020-12-16 01:10

    This is a solution that doesn't require JavaScript (as my previous solution did).

    You can achieve what you want by assigning display: table-cell to the containing div. Here's an example: http://jsbin.com/evuqo5/2/edit

    I feel I must warn you that you will need to test this in every browser you intend to support. Support for the table-cell value is fairly new, particularly in Firefox. I know it works in Firefox 4, but I don't know about any of the 3.x iterations. You'll also want to test in IE (I've only tested in Chrome 10 and Firefox 4).

    The CSS:

      div#container {
    width: 700px;
    height: 400px;
    position: relative;
    border: 1px solid #000;
    display: table-cell;
    vertical-align: middle;  
  }
  div#container img {
    margin: 0 auto;
    display: block;
  }

    You won't need the div#container img styles if you don't also want to horizontally align the image.

    0 讨论(0)
  • 忘掉有多难
    2020-12-16 01:10

    See this awser: How to vertical align image inside div

    If you want to align horizontally also, add the right and left, like this:

    div {
  position:relative;
}
img {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}
    0 讨论(0)
 看不清?
提交回复
热议问题