Question

我有一个简单的单页静态站点，其中一个bootstrap容器div包含4个其他div。

“intro-box”类元素应该居中。它完全集中在firefox和chrome。然而IE11将它定位在容器div的最左侧。我已经包含了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;
 }

Answer 1

除了删除JanR所说的左，右和绝对位置外，添加保证金为

margin: 0 auto;

如果您不想要顶部，底部边距并使其在浏览器中统一，因为您指定了最大宽度，边距会自动将其对齐到中心，或者对于IE，您可以删除

position: absolute

我试过它正在工作

Answer 2

试试这个......您可能需要调整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;
 }

Answer 3

删除左：0，右：0 并从绝对位置设置相对位置。

Div不对齐仅适用于IE

3 个答案: