2013-12-17 2 views
0

У меня есть простой статический сайт на одной странице с контейнером контейнера bootstrap, который обертывает еще 4 divs.Div Not Aligned Только для IE

Элемент класса «intro-box» должен быть центрирован. он идеально сосредоточен в firefox и chrome. Однако IE11 позиционирует его в крайнем левом углу контейнера div. Ive включил html и css. любая помощь очень ценится.

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title><%= content_for?(:title) ? yield(:title) : "my_title" %></title> 
<meta name="description" content="<%= content_for?(:description) ? yield(:description) : "my_description" %>"> 

<%= stylesheet_link_tag "application", :media => "all" %> 
<%= favicon_link_tag "/favicon.ico" %> 
<%= csrf_meta_tags %> 
<%= yield(:head) %> 
</head> 
<body class="<%= controller_name %> <%= action_name %>"> 
<div class="background"> 
<%=image_tag("bkgrnd.jpg", :class=>"background-img")%> 
</div> 
    <div class="container"> 
    <div class="center-div"> 
<div class="social"> 
    some social networking stuff 
    <div class="email-capture"> 
    some fields to capture users emails 
    </div> 
    <p class="intro-box"> some introductory stuff </p> 
    </div> 
    <div class="opaque-block"> some stuff</div> 
    </div>  
    </div> 

CSS

.intro-box{ 
    left: 0; right: 0; 
    position:absolute; 
    top:185px; 
    display:block; 
    margin:auto; 
    font-family: "abeatbyKai", sans-serif; 
    color:#000; 
    max-width:180px; 
height:90px; 
    padding:10px; 
} 
+1

Вы попытались удалить позицию: абсолютное и левое: 0, справа: 0? он должен сосредоточить его без них. – JanR

+0

Не могу поверить, что все было так просто, но это сработало. Мне пришлось относиться к родственнику. Не уверен, почему это было бы на chrome и firefox, но спасибо в любом случае. Если вы ответили как ответ, то отметьте его правильно. – Renegade

ответ

0

Удалены левый: 0, справа: 0 и установить позицию относительно абсолютны.

0

В дополнение к удалению влево, вправо и абсолютное положение по словам JanR, добавьте поля, как

margin: 0 auto; 

, если вы этого не сделаете хотите верхний, нижний край и сделать его однородным в браузерах, так как вы указали max-w IDþ маржа будет автоматически выравнивать его к центру, или для IE, вы можете просто удалить

position: absolute 

я попробовал это работает

0

Попробуйте это ... Вы, возможно, потребуется отрегулировать запас 185px, чтобы соответствовать вашим необходимо.

.intro-box{ 
    margin:185px auto 0 auto; 
    display:block; 
    margin:0 auto; 
    font-family: "abeatbyKai", sans-serif; 
    color:#000; 
    max-width:180px; 
    height:90px; 
    padding:10px; 
}