У меня есть простой статический сайт на одной странице с контейнером контейнера bootstrap, который обертывает 4 других div.
элемент класса "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;
}
Удалено слева: 0, справа: 0 и установите положение относительно абсолютного.
В дополнение к удалению левого, правого и абсолютного положения, указанного в JanR, добавьте маржу как
margin: 0 auto;
если вам не нужен верхний, нижний край и сделать его равномерным в браузерах, так как вы указали максимальную ширину, маржа автоматически выровнят ее по центру, или для IE вы можете просто удалить
position: absolute
я попробовал его работу
Попробуйте это... вам может понадобиться отрегулировать маржу по 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;
}