Question

我正在处理的应用程序从API接收HTML并需要添加一些简单的格式以便在浏览器中呈现。收到的内容通常只是<img>包裹在<a>中 - 非常简单。

收到的HTML示例：

<a href="http://www.blah.com"><img src="http://www.blah.com/image.gif"></a>

我需要使用内联样式（在我添加的标签中）格式化接收到的HTML，它将内容水平和垂直地放在浏览器文档区域中。我不能改变代码片段本身，所以我需要构建一个HTML容器，它将正确地集中所提供的代码片段。

这是我在的地方：

<html>
<body style="margin:0; padding:0;  ">
<div style="margin-left:auto; margin-right:auto; display:table-cell; vertical-align:middle">

<!-- Snippet -->
<a href="http....."><img src="http...." width="300" height="50" /></a>

</div></body>
</html>

我无法让页面按照样式执行我需要的操作，因此为了澄清这里我需要的是使用表格实现的（工作）解决方案。我更喜欢用风格来做。

<body style="margin:0; padding:0;  ">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<center>

<!-- snippet  -->
<a href="http..."><img border="0" alt="" src="http..." width="300" height="500" /></a>

</center>
</td>
</tr>
<table>
</body>

Answer 1

如果您知道图像的宽度，您可以绝对定位它，并以此方式居中。

img { /* Assuming a size of 300 by 500, as in your example */
    position:absolute;
    top:50%;
    left:50%;
    margin:-250px 0 0 -150px;  }

请参阅小提琴：http://jsfiddle.net/TheNix/W4cPw/3/

<强>更新

如果您根本不知道内容或周围的标记，那么执行此操作（没有Javascript hacks）的唯一方法是使用表格（ gasp！）。

HTML

<table>
    <tr>
        <td>
            <a href="#"><img src="http://lorempixum.com/300/500" /></a>
        </td>
    </tr>
</table>

CSS

html, body, table {
    width:100%;
    height:100%; }

td {
    vertical-align:middle;
    text-align:center; }

见小提琴： http://jsfiddle.net/TheNix/W4cPw/4/

如何在浏览器中居中HTML代码段？

1 个答案: