发表新帖
发表新帖

Center an Image vertically and horizontally using CSS

前端 未结
关注
10 1015
遥遥无期
遥遥无期 2020-11-30 08:12

How do I vertically and horizontally center an image when I do not know the size of it? I asked this question and someone suggested using a table. This isn\'t the first time

相关标签:
10条回答
  • 走了就别回头了
    2020-11-30 08:21

    The CSS Method

    You can set an explicit height and line-height on your container to center an image:

    <div id="container">
    <img src="http://placekitten.com/200/200" />
</div>

<style>
    #container { height: 600px; line-height: 600px; text-align: center }
    #container img { vertical-align: middle }
</style>

    See it in action: http://jsfiddle.net/jonathansampson/qN3nm/

    The HTML/Table Method

    The table method follows. It's merely utilizing the valign (vertical-align) property:

    <table>
  <tbody>
    <tr>
      <td align="center" valign="middle">
        <img src="someHeight.jpg" />
      </td>
    </tr>
  </tbody>
</table>

    A jQuery Plugin

    Since you tagged this question "jQuery," I'll provide a reference to the jQuery Center Plugin that also achieves vertical/horizontal centering by using CSS positioning and dynamic reading of an elements dimensions: http://plugins.jquery.com/project/elementcenter

    0 讨论(0)
  • 佛祖请我去吃肉
    2020-11-30 08:25

    With a table:

    <table height="400">
    <tbody>
        <tr>
            <td valign="middle"><img /></td>
        </tr>
    </tbody>
</table>

    The 400 is just something I picked. You will need to define a height on table so it is taller than your image.

    A jquery solution would be good if you wanted to try and use divs and junk, but if you don't care you don't care. You also have to rely on JS being turned on.

    HTML:

    <div id="imgContainer" style="position:relative;">
    <img style="position:absolute;" />
</div>

    JS:

    $('#imgContainer > img').each(function(){
    //get img dimensions
    var h = $(this).height();
    var w = $(this).width();

    //get div dimensions
    var div_h =$('#imgContainer').height();
    var div_w =$('#imgContainer').width();

    //set img position
    this.style.top = Math.round((div_h - h) / 2) + 'px';
    this.style.left = '50%';
    this.style.marginLeft = Math.round(w/2) + 'px';
});
    0 讨论(0)
  • 走了就别回头了
    2020-11-30 08:26

    If you don't mind losing IE compatibility (IE7 and older don't support this at all), you can use some CSS to simulate tables, without ever using one:

    <div style="display: table; height: 500px; width: 500px;">
   <img src="pic.jpg" style="display: table-cell; vertical-align:middle; margin: 0 auto; text-align: center">
</div>

    Just pick appropriate height/width for the containing <div>.

    0 讨论(0)
  • 你的背包
    2020-11-30 08:27

    There is some bad way to do it. Just display this image as block with absolute positioning (parent element must have "position: relative"). So you can play with margin-left and margin-top with negative values ~= a half of image sizes (respectively width and height)

    0 讨论(0)
  • 無奈伤痛
    2020-11-30 08:31

    Pretty easy, this is the format of all my images/containers:

    <div class="photo"><img /></div>
<style type="text/css">
  div.photo { height: 100px; line-height: 100px;text-align:center; }
  div.photo img { vertical-align:middle;}
</style>
    0 讨论(0)
  • 情书的邮戳
    2020-11-30 08:33

    DON'T USE TABLES. Terrible practice unless your using tabular data.

    The best way to do this is with the following code.

    <html>
<head>
    <title></title>
    <style media="screen">
    .centered {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -50px 0 0 -50px;*/
    }

    </style>
</head>
<body>

<img class="centered" src="" width="100" height="100" alt="Centered Image"/>

</body>

    This will work as long as it is not inside any elements without static positioning. All containing elements must be static positioning which is the default anyway.

    0 讨论(0)
 看不清?
提交回复
热议问题