vertical alignment of image inside a div

2019-01-23 15:26发布

站内问答 / HTML/CSS
352 6 4

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

6条回答
▲ chillily
2楼-- · 2019-01-23 15:45

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) 举报
▲ chillily
3楼-- · 2019-01-23 15:52

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) 举报
Animai°情兽
4楼-- · 2019-01-23 15:56

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) 举报
Deceive 欺骗
5楼-- · 2019-01-23 16:00

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) 举报
做个烂人
6楼-- · 2019-01-23 16:04

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) 举报
Evening l夕情丶
7楼-- · 2019-01-23 16:06

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) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)