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

I have this page:

我有这个页面:

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

I have a map and a map over blue div I would like to display at center

我有一张地图和一张蓝色div地图,我想在中心显示

This is code HTML:

这是代码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>

This is code CSS:

这是代码CSS:

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

I tried to use margin: 0 auto but unfortunately not working. Can you please help me solve this problem?

我试图使用margin:0 auto但遗憾的是没有工作。你能帮我解决一下这个问题吗?

Thanks in advance!

提前致谢!

5 个解决方案

#1

if you want to keep its position absolute you can use calc for top/left but you need to know the height/width of your div.

如果你想保持它的绝对位置,你可以使用顶部/左边的计算,但你需要知道你的div的高度/宽度。

Further, the parent of this blue box needs to be 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);
}

#2

My suggestion is : wrap the two div's div#huge_it_google_map1_container and div.date-contact with a parent div. The parent div's width will be same as that of div#huge_it_google_map1_container. So, the html will be:

我的建议是:将两个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>

The css will be as follows:

css将如下:

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

#3

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

Your Blue div is absolutely positioned so its hard to get a center aliment,

您的Blue div绝对定位,因此很难获得中心食物,

Make it relatively positioned and align center using margin 0px auto;

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

Now give a negative margin bottom of -208 px so that the blue div overlaps the map.

现在给出-208像素的负底部,以便蓝色div与地图重叠。

Set the required z-index so that the blue box is above the map.

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

-Cheers...!!

#4

EDIT: I didn't realize you site until your edit. You should go for a position: absolute in your .date-contact style. So, my recommended code won't apply here. But you can benefit the explanations I hope.

编辑:在您编辑之前我没有意识到您的网站。你应该选择一个职位:绝对的.date-contact风格。所以,我推荐的代码不适用于此处。但是你可以从我希望的解释中获益。

First of all, you cannot use margin: 0 auto with position: absolute. And using classes in a seperated css file, instead of using inline styles, always help you to see your code clearly. With this seperation of concerns, you'll also be applying the DRY principle in your code.

首先,你不能使用margin:0 auto和position:absolute。在分离的css文件中使用类,而不是使用内联样式,总是帮助您清楚地看到您的代码。有了这些关注点,您还将在代码中应用DRY原则。

I tidied up your code to provide your desired effect. Please see and if you'll have questions, fire away. Will try my best to help.

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

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%;
}

---

NEW ANSWER FOR EDITTED QUESTION

对于编码问题的新答案

The other answers say that you should absolutely position your blue div. I say if you do that you'll never make it show in the center. The easy way of doing this, is to place your blue div in another div which is positioned absolute. Your blue div will show in center just like you wanted with margin: 0 auto; Also, I placed your blue div inside the div#huge_it_google_map1 because I believe it's where it belongs.

其他答案说你应该绝对定位你的蓝色div。我说如果你这样做,你永远不会把它展示在中心。这样做的简单方法是将你的蓝色div放在另一个绝对的div中。您的蓝色div将显示在中心,就像您想要的边距: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 */
}}

For your convenience, this is the working fiddle. I hope you achieve what you wanted.

为了您的方便,这是工作小提琴。我希望你达到你想要的。

#5

Blue div has position : absolute. For centered displaying you need to use left and top:

蓝色div有位置:绝对。对于居中显示,您需要使用左侧和顶部:

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