1. дома
  2. Вопрос и ответ
  3. Центральные изображения в таблице с одной строкой

Центральные изображения в таблице с одной строкой

2013-03-14 6 views
0

Я пытаюсь получить три изображения на одной строке, один из которых выровнен по левому краю, один по центру и последний правый. Я решил использовать таблицу с одной строкой, чтобы сделать это, но мне трудно получить изображения, которые будут центрированы в соответствующих ячейках.Центральные изображения в таблице с одной строкой

Есть ли лучший способ сделать это, чем я выбрал? Я не буду использовать атрибут <td align="center">, поскольку он устарел в HTML5, поэтому я ищу способ сделать это с помощью CSS. Это то, что я в данный момент (я установил атрибут границы таблицы в «1», так что я могу видеть, как выравнивание изображения внутри ячейки делает):

<style> 
    .centre_image 
    { 
    float:center; 
    } 
</style> 

<body> 
<table border="1"> 
    <tr> 
    <td class="centre_image"> 
     <object type="image/svg+xml" data="images/lawfirms.svg"> 
      <img src="images/lawfirms.png" alt=""/>  
     </object> 
    </td> 
    <td class="centre_image"> 
     <object type="image/svg+xml" data="images/industry.svg">  
      <img src="images/industry.png" alt=""/>  
     </object> 
    </td> 
    <td class="centre_image"> 
     <object type="image/svg+xml" data="images/in-house.svg">  
      <img src="images/in-house.png" alt=""/>  
     </object> 
    </td> 
    </tr> 
</table>

Это дает следующий результат в Firefox 19.0 на Ubuntu: enter image description here

и следующий результат в Chrome 25.0: enter image description here

EDIT - вот полный HTML после внесения изменений, упомянутых в ответе j08691 в:

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head> 
<meta charset="UTF-8"/>  
<title>SVG Included with <object> tag</title> 

<style> 
.centre_image 
{ 
text-align:center; 
} 
</style> 
</head> 

<body> 
<table border="1" style="width:100%"> 
    <tr> 
    <td class="centre_image"> 
     <object type="image/svg+xml" data="images/lawfirms.svg"> 
      <img src="images/lawfirms.png" alt=""/>  
     </object> 
    </td> 
    <td class="centre_image"> 
     <object type="image/svg+xml" data="images/industry.svg">  
      <img src="images/industry.png" alt=""/>  
     </object> 
    </td> 
    <td class="centre_image"> 
     <object type="image/svg+xml" data="images/in-house.svg">  
      <img src="images/in-house.png" alt=""/>  
     </object> 
    </td> 
    </tr> 
</table> 

</body> 
</html>

Вот результат ответа Нареш Кумар: enter image description here

источник

2013-03-14 Clive van Hilten

+2

Нет значения 'center' для свойства float также, пожалуйста, настройте [** jsFiddle **] (http://jsfiddle.net) – Adrift

+1

Попробуйте сбросить настройки.css для

, ,
, и . Это поможет с несогласованностью браузеров. –

+0

Это не похоже на табличные данные ... – cimmanon

ответ

3

Как нет float:center собственности, вы пробовали text-align:center?

.centre_image { 
    text-align:center; 
}

jsFiddle example

источник

2013-03-14 16:33:25 j08691

+1

И бинго было его именем-о. – Michael

+0

Благодарим вас за пример jsFiddle, но таблица по-прежнему делает то же самое. Я поставил полный .html-файл как EDIT на мой вопрос, что я делаю неправильно? –

+1

Спасибо всем, кто ответил! Проблема заключалась в самих моих изображениях - как новичок в Inkscape, я оставил свои .svg-файлы размером 600x400, а поскольку изображение не было сосредоточено на холсте, я ошибочно считал, что он неправильно отображается в клетка. Исправлены файлы .svg в Inkscape, а затем атрибут CSS «text-align: center» работал нормально. –

0

попробовать что-то вроде:

.centre_image{ 
    text-align:center; 
    margin-left:auto; 
    margin-right:auto; 
}

я надеюсь, что это поможет вам.

источник

2013-03-14 16:34:45

+0

Благодарим вас за вход Франсуа, к сожалению, это не имеет значения - см. EDIT на мой вопрос и ответ на ответ j08691. –

0

В HTML5 vAlign устарел. Вот советы, которые помещают все три изображения в боковом теге li. И в CSS назначьте отображение свойств: встроенный блок для тега li.

источник

2013-03-14 16:37:15

+0

Спасибо за ваш вход Naresh, пожалуйста, посмотрите результат в редактировании, которое я сделал по моему вопросу. –

0

Было много способов не сделать это правильно. Особенно «float: center».

fiddled an example I здесь и другой fiddle with basic .css сброс здесь

Так как вы хотите, чтобы центрировать горизонтально в TD тег, вы можете просто выровнять его ..

<td align="center">

Но вы заметили, что «выравнивание 'свойство «устарело», и вам будет предложено использовать CSS вместо этого. Для этого, другие уже показали вам ответ

.centre_image { 
    text-align:center; 
    vertical-align:middle; 
}

Этот CSS будет работать, пока ваша элемент не «поплыл»

P.S. «DEPRECATED» не является злом.

p.s. У w3school есть not so good reputation на StackOverflow.

источник

2013-03-14 17:03:31

+0

Скажите, is '

устарел? –

+0

Благодарим вас за ввод Milche, но text-align: центр не работает для меня. Пожалуйста, см. Мой комментарий к ответу j80691 и редактирование на мой вопрос, где я перечислил полный HTML. Я, вероятно, делаю что-то действительно неправильное :-) –

+0

Нет, согласно http://www.w3schools.com/tags/att_table_border.asp, атрибут border не устарел. Удаление, похоже, не имеет значения. –

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

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