2010-12-07 4 views
0

У меня есть один div и некоторый текст внутри него. чтобы сделать мой контент горизонтальным и вертикальным центром, я использую css. он отлично работает в firefox, но контент не является вертикально центром при тестировании следующего кода в IE6.содержание вертикального центра

поэтому, пожалуйста, назовите меня, что мне нужно добавить или изменить в моем css.

мой HTML код

<html> 
<head> 
<title>Vertical Centering</title> 
<style> 
.content { 
    text-align: center; 
    display: table-cell; 
    vertical-align: middle; 
    background-color: green; 
    height: 200px; 
    width: 250px; 

} 
</style> 
</head> 
<body> 
<div class="content"> 
Hello. 
</div> 
</body> 
</html> 

пожалуйста посмотрите на мою CSS и скажите мне, почему он не работает в IE и пожалуйста исправить мою CSS таким образом, в результате он должен выглядеть одинаково во всех браузер.

благодаря

+0

Повторно разместить HTML-код. –

+2

дисплей: настольная камера; не поддерживается ниже IE8. – easwee

ответ

1

вы можете обернуть текст с пролетом, а затем установить position:relative и top:45%;

.content span { 
    position:relative; 
    top:48%;  
} 

живой пример: http://jsbin.com/ovabo4/3

+0

Прежде всего, спасибо за очень большое спасибо за ур. но почему у укажите верх: 45%, почему бы и нет другого номера. plzz expain. – Thomas

+0

, потому что остальные 10% (5% от каждого верхнего и нижнего) являются высотой текста. – Sotiris

+0

хотел бы рассказать 10% или 5% вещей в деталях. потому что я слабый в CSS. благодаря – Thomas

0

Хорошим методом является это, поэтому он всегда находится точно в середине (только w orks, если у вас есть фиксированная высота div)

<div class="centered"></div> 

html, body{height: 100%;} 
.centered{height: 500px; width: 500px; position: relative; top: 50%; margin-top: -250px; /* Just use a negative margin that is half the height of your element */ 
Смежные вопросы