Question

我有这个页面：

http://fetr.zonedesign.ro/contact/

我想在中心显示蓝色div的地图和地图

这是代码HTML：

<div style="float:left;width:100%;padding:0 10%;text-
align:center;margin:10px auto;display:block;">
<div class="date-contact">proba</div>
<?php echo do_shortcode( '[huge_it_maps id="1"]' ); ?>
</div>

这是代码CSS：

@media (min-width: 800px) {
.date-contact
{
width:300px;
height:150px;
background:blue;
position:absolute;
z-index:10;
}
}

我尝试使用margin: 0 auto，但遗憾的是无法使用。你能帮我解决这个问题吗？

提前致谢！

Answer 1

如果你想保持它的位置绝对，你可以使用calc为top / left但是你需要知道div的高度/宽度。

此外，此蓝框的父级必须为position relative/absolute/or fixed：

here's a demo

<div></div>

div {
    background: blue;
    position: absolute;
    width: 100px;
    height: 100px;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

Answer 2

编辑： 在您编辑之前，我没有意识到您的网站。你应该采用position: absolute风格的.date-contact。所以，我推荐的代码不适用于此。但是你可以从我希望的解释中受益。

首先，您不能将margin: 0 auto与position: absolute一起使用。在分离的css文件中使用类，而不是使用内联样式，总是帮助您清楚地看到您的代码。考虑到这些问题，您还需要在代码中应用DRY原则。

我整理了你的代码以提供你想要的效果。请查看，如果您有任何疑问，请离开。我会尽力帮助你。

HTML

<div class="outer-div">
    <div class="date-contact">proba</div>
</div>

CSS

.date-contact {
    width:300px;
    height:150px;
    background:blue;
    margin: 0 auto;
}

.outer-div {
    text-align:center;
    margin:100px auto;
    padding:0 10%;
}

针对编辑问题的新答案

其他答案说你应该绝对定位你的蓝色div 。我说如果你这样做你永远不会让它显示在中心。这样做的简单方法是将你的蓝色div放在另一个绝对的div中。您的蓝色div将显示在中心，就像您想要margin: 0 auto;一样。此外，我将您的蓝色div放在div#huge_it_google_map1内，因为我相信它属于它。

HTML

<div class="yourMapDiv">
    <div class="outer-div" id="huge_it_google_map1">
    <div class="date-contact">proba</div>
    <!-- Your other divs and map contents inside the div#huge_it_google_map1 -->
    </div>
</div>

CSS

.yourMapDiv {
    position: relative;
    background-color: yellow;
    padding: 10px;
}

.outer-div {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    text-align:center;
    background-color:red; /* Remove this attribute to see your map div (yellow) */
}

.date-contact {
    background-color:blue;
    width:300px;
    /*height:150px;*/
    margin: 0 auto; 
    /* or "margin: 50px auto 0" if you like to give a little margin-top for 50px */
}}

为方便起见，这是有效的fiddle。我希望你达到你想要的目标。

Answer 3

我的建议是：将两个div的div＃huge_it_google_map1_container和div.date-contact与父div包装在一起。父div的宽度与div＃huge_it_google_map1_container的宽度相同。所以，html将是：

<div class="map_parent_wrapper">
<div id="huge_it_google_map1_container"></div>
<div class="date-contact"></div>
</div>

css如下：

.map_parent_wrapper {
position:relative
}
.date-contact {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}

Answer 4

.date-contact {
  background: none repeat scroll 0 0 blue;
  clear: both;
  height: 150px;
  margin: 0 auto -208px;
  position: relative;
  width: 300px;
  z-index: 10;
}

你的蓝色div绝对定位，因此难以获得中心食物，

使其相对定位并使用边距0px auto对齐中心;

现在给出-208像素的负边距，以便蓝色div与地图重叠。

设置所需的z-index，使蓝框位于地图上方。

... -Cheers !!

Answer 5

蓝色div有position : absolute。对于居中显示，您需要使用左侧和顶部：

left: 50% - width block( example 40%)
top:50% - height block( example 40%)

我怎样才能将这个div对齐？

5 个答案: