Javascript 使用CSS将图像垂直和水平居中_Javascript_Jquery_Html_Css_Image

Javascript 使用CSS将图像垂直和水平居中

javascript jquery html css image

Javascript 使用CSS将图像垂直和水平居中,javascript,jquery,html,css,image,Javascript,Jquery,Html,Css,Image,当我不知道图像的大小时，如何将其垂直和水平居中？我问，有人建议用一张桌子。这不是我第一次听说桌子能做到这一点，但我没有运气就尝试了搜索所以只有当我知道图像的大小时才会得到结果。我怎么用桌子做这个注意：JavaScript/jQuery不是首选，但如果有解决方案，我愿意使用。CSS方法可以在容器上设置显式高度和线条高度以使图像居中： <div id="container"> <img src="http://placekitten.com/200/200" />

当我不知道图像的大小时，如何将其垂直和水平居中？我问，有人建议用一张桌子。这不是我第一次听说桌子能做到这一点，但我没有运气就尝试了

搜索所以只有当我知道图像的大小时才会得到结果。我怎么用桌子做这个

注意：JavaScript/jQuery不是首选，但如果有解决方案，我愿意使用。

CSS方法可以在容器上设置显式高度和线条高度以使图像居中：

<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>

jQuery插件既然您将这个问题标记为“jQuery”，我将提供jQuery Center插件的参考，该插件还可以通过CSS定位和元素维度的动态读取来实现垂直/水平居中：

和表格：

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

基本上，您应该能够用HTML创建一个表，

td

标记的样式应该将

text align

属性设置为

center

，将

vertical align

属性设置为

middle

。此外，您还可以处理其他属性，如边框、填充等。

使用CSS无法轻松地垂直对齐图像中心。尽管要使其水平居中对齐，您可以使用以下方法

<img src="randomimage.jpg" style="margin: 0px auto;" />

我不会推荐一张桌子来布置一个图像，因为这已经不是一个好的实践了。表格只能用于表格数据。

有一些不好的方法。只需将此图像显示为具有绝对定位的块（父元素必须具有“位置：相对”）。因此，如果您不介意失去IE兼容性（IE7和更早版本根本不支持此功能），您可以使用一些CSS模拟表格，而不必使用CSS：

<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>

只需为容器选择适当的高度/宽度。

非常简单，这是我所有图像/容器的格式：

<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>


div.photo{height:100px；line height:100px；text align:center；}
div.photo img{垂直对齐：中间；}

不要使用表格。糟糕的做法，除非你使用表格数据

最好的方法是使用以下代码

<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>


.居中{
位置：绝对位置；
最高：50%；
左：50%；
利润率：-50px0-50px*/
}

只要它不在没有静态定位的任何元素内，它就可以工作。所有包含的元素都必须是静态定位，这是默认设置。

我将完成以下操作。使用firefox、chrome、IE8和opera进行测试。一切都好

table.NAME
{
    background: green; //test color
    text-align: center;
    vertical-align:middle;
}
table.NAME tr td
{
    width: 150px;
    height: 150px;
}

html

...

如果您不介意丢失img标记，可以使用背景图像将图像居中放置在容器块中

标记：

<div class="imagebox" style="background-image: url(theimage.png);"></div>

居中的？无论窗口大小，它都能做到最好吗？所以当窗口大小改变时，它会保持中心位置？（直到它侵入图像本身）我认为父元素必须是静态的。像这样做了一个快速的双重检查测试，但是除了firefox之外，它似乎在其他任何东西中都不有效。IE 8可以，但不管什么原因，宽度都是拉伸的。我需要chrome的支持，所有的东西都应该在Opera上更简单一点：。居中{位置：绝对；顶部：50%；宽度：100%；文本对齐：居中；}但是考虑到没有优雅的方式垂直居中图像，也许表并不比其他方法差…？如果迫切需要，可以使用javascript来完成。使用表格进行布局就像使用汽车在海上航行一样。你可以让它工作，但它绝对不适合你的目的。（表格旨在用于存储表格数据。表格数据的示例包括公共汽车时刻表和运动成绩列表。存储表格数据的表格称为数据表格。不幸的是，随着时间的推移，在页面布局中错误使用表格已变得很普遍。这种类型的表格称为布局表格。）-XHTML spect jQuery代码有两个问题：一个是一旦图像完成加载（文档加载后的一段时间），就需要运行它，否则

等于零。另一个是在最后一行中，算法应该是

（（div_w-w）/2）

，类似于

top

计算。不确定

left='50%'

是做什么用的，我只是将

设置为left

和

top

。我也觉得CSS在这样的事情上太糟糕了。

<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>

table.NAME
{
    background: green; //test color
    text-align: center;
    vertical-align:middle;
}
table.NAME tr td
{
    width: 150px;
    height: 150px;
}

<table class="NAME"><tr>
<td><a href="jdhfdjsfl"><img src="dfgdfgfdgf.gif" alt="dfgdfgfdgf.gif"/></a></td>
<td><a href="jdhfdjsfl"><img src="dfgdfgfdgf.gif" alt="dfgdfgfdgf.gif"/></a></td>
...

<div class="imagebox" style="background-image: url(theimage.png);"></div>

.imagebox
{
  width: 500px;
  height: 500px;
  border: solid 1px black;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}