Как центрировать мой отделение в таблице с помощью CSS?
Это все, что я могу узнать. Не уверен, поможет ли это, но подумал, что я добавлю это в микс.
WORD-WRAP
Это свойство указывает, должна ли текущая отображаемая строка разрываться, если содержимое превышает границу указанного поля рендеринга для элемента (в некоторых отношениях это похоже на свойства 'clip' и 'overflow' в намерении.) Это свойство должно применяться, только если элемент имеет визуальный рендеринг, является встроенным элементом с явной высотой / шириной, абсолютно позиционирован и / или является блочным элементом.
WORD-BREAK
Это свойство управляет поведением разрыва строки в словах. Это особенно полезно в тех случаях, когда в элементе используется несколько языков.
6 ответов
Встроенные элементы можно легко центрировать, используя свойство css "text-align: center;". Элементы блока должны быть выровнены по центру с использованием "margin-left: auto; margin-right: auto;" и задав им фиксированную ширину. В вашем конкретном случае я бы предложил использовать диапазон вместо «div» или полностью избавиться от div и использовать метод выравнивания текста.
Обновление
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Centering</title>
<style type="text/css">
table{
border:1px solid black;
}
span{
background-color:red;
color:white;
}
td{
text-align:center;
width:200px;
}
</style>
</head>
<body>
<div class="item" id="item1">
<table>
<tr>
<td>
<span>Hi there!</span>
</td>
</tr>
</table>
</div>
</body>
</html>
#slideshow {
margin: 0 auto;
}
and also text-align: center
для таблицы
Я бы добавил комментарий выше, но у меня нет 50 респ .. дох. Я, кажется, помню, что если у вас есть что-нибудь перед доктипом в IE6, он отправляет это в режим quirks. Это может вызывать проблемы.
<?xml version='1.0' encoding='UTF-8'?>
Возможно, стоит попробовать устранить это.
стандарт
div#slideshow {
margin : 0 auto;
width : 200px;
}
и для (старого?), т.е.
td {
text-align : center;
}
, т.е. не "любит" автоматические поля но центрирует не только встроенные элементы, но и блочные элементы (div)
, также не гарантируют, что является стандартным значением свойства display для td on, т.е. потому что он не использует table-cell, а text-align не будет работать внутри встроенных элементов, поэтому другой Возможный подход - обернуть его вокруг другого div:
<td>
<div id="slideshow_container">
<div id="slideshow">
...
</div>
</div>
</td>
и css
div#slideshow {
margin : 0 auto;
width : 200px;
}
div#slideshow_container {
text-align : center;
width : 100%;
height : 100%;
}
Если вы можете удалить абсолютное позиционирование, используйте text-align: center на td.
Если вы не можете удалить абсолютное позиционирование и все ваши изображения имеют одинаковый размер, установите left на td / 2 - img_width / 2. Итак, если у вас есть изображение шириной 80 пикселей в td шириной 200 пикселей, вы должны использовать
#slideshow img {position:absolute; left:60px; opacity:0; z-index:8;}
. Если вы не можете удалить абсолютное позиционирование и ваши изображения имеют разные размеры, вам придется вычислить левое значение в вашем javascript.
IE не поддерживает непрозрачность. Вместо него используется фильтр : альфа (непрозрачность = 50); .
Следующее решение работает, даже если вы не знаете размер изображения:
