Как центрировать фрагмент HTML в браузере?

-1

Приложение, над которым я работаю, получает HTML из API и должно добавить к нему простое форматирование для рендеринга в браузере. Получаемый контент, как правило, всего лишь <img>, обернутый в <a> - очень простой.Как центрировать фрагмент HTML в браузере?

Пример 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>

источник

2012-02-10 Ollie C

Вы можете поставить здесь, как ваш HTML, который будет receve нового HTML? И как вы создаете html и пример возвращаемого html? –

-1: «Этот вопрос не показывает никаких исследований» - что вы пробовали? – ANeves

Я думал, что вопрос довольно ясный - это очень простая проблема, но я добавил больше подробностей, чтобы прояснить это, и то, что я пробовал. –

Видя, как вы знаете ширину изображения, вы можете позиционировать его абсолютно, и в центре его таким образом.

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/

UPDATE

В том случае, когда вы не знаете, содержание или окружающую разметку на всех, единственный способ сделать это (без 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/

источник

2012-02-10 14:42:08 Nix

Боюсь, что это не сработает. Как я сказал в вопросе, приведенный пример типичен, но HTML в фрагменте меняется. Содержимое может быть изображением, это может быть какой-то текст в div, он может быть чем-то другим - API, который я использую, поставляет контент многих типов, и они могут меняться, однако они всегда являются простыми фрагментами HTML и будут не имеют никакого позиционирования в них. –

См. Мой обновленный ответ – Nix

Как центрировать фрагмент HTML в браузере?

ответ

Смежные вопросы