Как отцентрировать DIV точно по центру (по горизонтали и verically) родительского DIV в IE7

Стили:Как отцентрировать DIV точно по центру (по горизонтали и verically) родительского DIV в IE7

.innerdiv{ 
display: inline-block; 
vertical-align: middle; 
width: 300px; 
} 
.outerdiv{ 
text-align: center; 
background: #c0c0c0; 
} 
.outerdiv .before,.outerdiv:before { 
content: ''; 
display: inline-block; 
/**display: inline;*/ 
height: 100%; 
vertical-align: middle; 
margin-right: -0.25em; 
}

HTML:

<div style="height:500px" class="outerdiv"> 

<div class="innerdiv"> 
    <span class="" style="font-size:26px">Hello </span> 
    <br/> 
    <img style="width:150px" src="http://mrsdalesworkspace.pbworks.com/f/1302032618/desert(1).jpg"/> 
</div>

Я хочу центрируйте внутренний div как по горизонтали, так и по вертикали относительно внешнего div, а приведенный выше код работает отлично везде, кроме IE7.

Я думаю, что из-за присутствия псевдокласс класса «до» он не работает в IE7.

Я попытался ее фиксации с помощью

стили являются:

.outerdiv{ 
text-align: center; 
background: #c0c0c0; 
*zoom: expression( 
this.runtimeStyle.zoom="1", 
this.appendChild(document.createElement("small")).className="after", 
this.insertBefore(document.createElement("small"), this.firstChild).className="before" 
);

}

.outerdiv .before,.outerdiv:before { 
content: ''; 
display: inline-block; 
/**display: inline;*/ 
height: 100%; 
vertical-align: middle; 
margin-right: -0.25em;

}

Я не могу сделать это с помощью этого тоже.

Я даже попытался с помощью плагина

<!--[if lt IE 8]> 
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script> 
<![endif]-->

а также

<script type="text/javascript" src="http://jquery.lukelutman.com/plugins/pseudo/jquery.pseudo.js"></script>

Он по-прежнему не работает.

Я знаю, что используя position:absolute и устанавливая верхние и левые поля и позиции, мы можем достичь этого. Я хочу достичь этого, используя псевдоклассы.

источник

2013-08-01 user2594152

http://stackoverflow.com/questions/8779607/center-div-content-fluid-vertical-and- horizontal Следуйте за этим – hserusv

Это должно работать, в каждом браузерах:

.outerdiv { 
    position:relative; 
} 

.outerdiv .innerdiv { 
    position:absolute; 
    top:50%; 
    left:50%; 
    width:200px; 
    height:200px; 
    margin-top:-100px; // height/2 
    margin-left:-100px; // width /2 
}

источник

2013-08-01 10:15:59

Я знаю, что это будет работать в каждом браузере, но мне нужно решение с использованием псевдо классов. – user2594152

Почему вы хотите использовать псевдоклассы? Вы можете использовать http://code.google.com/p/ie7-js/, который является js-хаком ... См. Stackoverflow.com/questions/4181884/after-and-before-css-pseudo-elements-hack- для-ie-7 для получения дополнительной информации –

Вы можете попробовать этот класс:

.center { 
    position: absolute; /* do not change */ 
    top: 50%; /* do not change */ 
    left: 50%; /* do not change */ 
    width: 80%; /* 80% of the parent's width. Of course, you can change this value. */ 
    height: 80%; /* 80% of the parent's width. Of course, you can change this value. */ 
    margin-top: -40%; /* current height/2 */ 
    margin-left: -40%; /* current width/2 */ 
}

Example on codepen.io

источник

2013-08-01 10:33:43 aloisdg

IE7 просто не понимает ::before и ::after.

Это означает, что он не понимает комбинированный селектор .outerdiv .before,.outerdiv:before. Вы должны их разделить.

источник

2013-08-01 14:31:03 kapa

Как отцентрировать DIV точно по центру (по горизонтали и verically) родительского DIV в IE7

ответ

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