Центрирование изображения между двумя строками в IE - PullRequest
Новая
       26

Центрирование изображения между двумя строками в IE

2 голосов
/ 20 июля 2011

У меня есть этот код для центрирования изображения между двумя горизонтальными линиями.

CSS: 

.line-scale-left {
    position: absolute;
    background-color: #000000;
    border: #000000;
    height: 4px;
    top:190px;
    width: 25%;
    left: 250px;
}

.line-scale-right {
    position: absolute;
    background-color: #000000;
    border: #000000;
    height: 4px;
    top:190px;
    width: 25%;
    right: 250px;
}

.center-img {
    display:block;
    margin-left:auto;
    margin-right:auto;} 
}

HTML-код выглядит следующим образом <hr class="line-scale-left" /><img src="http://fleminglaw.biz/balance.gif" align="center" class="center-img" width="82px" height="61px" /><hr class="line-scale-right" />

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

Он работал нормально во всех браузерах, кроме IE 8 и 9, строки и остальная часть страницы выглядят нормально, за исключением того, что я не могу вообще отцентрировать это изображение в IE, и представление о совместимости не помогает или измените его на один бит.

Может кто-нибудь помочь новичку и подсказать, как получить изображения для центрирования в IE.

1 Ответ

1 голос
/ 20 июля 2011

Оберните это в содержащий div, если вам нужно расположить его в другом месте. 

.line-scale-left{
    float: left;
    width: 25%;
    margin-top: 30px;
}

.line-scale-right{
    width: 25%;
    float: left;
    margin-top: 30px;   
}

.center-img{    
    display:block;
    float: left;
}
...