Question

我知道有很多人问div对齐中心问题。但我尝试了大多数解决方案，似乎在我的情况下不起作用。对不起，我要问这里。我使用以下css

在我的网站http://tacfeed.com创建了浮动广告

/* Default Stylesheet */
#close {
  margin-left: auto;
  margin-right: auto;
    float:left;
    display:inline-block;
    padding:2px 5px;
color:black;
  background: #fff;
}

#responsive-adsense {
  display: none; 
}

#responsive-adsense{
  display: none;
} 


/*
GENERAL MEDIA QUERY FOR SMALL SCREEN SIZES - COVERS COMMON MOBILE DEVICES, PHONES/TABLETS...
*/

@media only screen and (max-width: 1023px) {

.adcontainer {
  display: none; 
}

#responsive-adsense{
  display: none;
} 

}


@media only screen and (max-width: 899px) {

.adcontainer {

  width: 100%;
  height: auto;
  position: fixed;
  bottom: 0px;
  display: block;
  background: #fff;
  color: #fff;
  margin: 0 auto;
  padding: 0px;
 }

#responsive-adsense {
  margin-left: auto;
  margin-right: auto;
 padding: 0px !important;
  width: 728px !important;
  display: block !important;
margin:0;
}

}


@media only screen and (max-width: 767px) {

.adcontainer {
 width: 100%;
 height: auto;

 position: fixed;
 bottom: 0px;
 display: block;
 background: #fff;
 color: #fff;
 margin: 0 auto;
 padding: 0px;
}

#responsive-adsense {
  margin-left: auto;
  margin-right: auto;
 padding: 0px !important;
 width: 728px !important;
 display: block !important; 
margin:0;
}

}


@media only screen and (max-width: 599px) {

.adcontainer {

 width: 100%;
 height: auto;
 position: fixed;
 bottom: 0px;
 display: block;
 background: #fff;
 color: #fff;
 margin: 0 auto;
 padding: 0px;
}

#responsive-adsense {
  margin-left: auto;
  margin-right: auto;
 padding: 0px !important;
 width: 468px !important;
 display: block !important; 
margin:0px;
}

}


@media only screen and (max-width: 479px) {

.adcontainer {
 width: 100%;
 height: auto;

 position: fixed;
 bottom: 0px;
 display: block;
 background: #fff;
 color: #fff;
 margin: 0 auto;
 padding: 0px;
}

#responsive-adsense {
  margin-left: auto;
  margin-right: auto;
 padding: 0px !important;
 width: 320px !important;
 display: block !important;
margin:0px;
} 

}

/* Here's the css for mobile devices */  
@media only screen and (max-width: 320px) {

.adcontainer {

 width: auto !important; 
 padding: 0px !important;
 height: 50px !important; 
}

#responsive-adsense {
  margin-left: auto;
  margin-right: auto;
 padding: 0px !important;
 width: 320px !important;
 display: block !important; 
margin:0px;
}

}

/* 
Add your custom styles in this file instead of style.css so it 
is easier to update the theme. Simply copy an existing style 
from style.css to this file, and modify it to your liking. 

When you update your theme, backup this file and re-add it after.
*/

/* Global */
.mystyle {}


/* Tablet - 800px, 768px & 720px */
@media only screen and (min-width: 720px) and (max-width: 800px) {
    .mystyle {}
}


/* Mobile - 480px & 320px */
@media only screen and (max-width: 719px) {
    .mystyle {}
}


/* Mobile - 320px */
@media only screen and (max-width: 479px) {
    .mystyle {}
}

这是页脚的HTML代码，在结尾之前。

<div class="adcontainer" style="background-color: rgba(255, 0, 0, 0)">

<div id="responsive-adsense">
<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>[X]</span>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- mobileadfor2013 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:320px;height:50px"
     data-ad-client="ca-pub-2658894403753596"
     data-ad-slot="4801520732"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

</div>
</body>

现在，我遇到了两个问题。首先，广告对齐中心处于纵向模式，但如果我将iPhone或Android手机旋转到横向，它将不会对齐中心。我试图使用“vertical-align”，“margin”，“float”，似乎都没有运气。

其次，广告未对齐到屏幕的最底部。您可以尝试在手机上访问我们的网站tacfeed.com。您可以看到底部区域至少剩下1像素。

任何帮助或建议将不胜感激。

Answer 1

似乎人们不知道这个解决方案将事情放在中心位置......你总是认为解决方案需要复杂才能工作，但你可以用CSS做到这一点，并且它支持所有浏览器。 ..

要将verticaly对齐到div的中心，您只需添加：

position: absolute;
left:0;
right:0;
margin: auto;

水平：

position: absolute;
top:0;
bottom:0;
margin: auto;

现在，绝对中心：

position: absolute;
top:0;
bottom:0;
left:0;
right:0;
margin: auto;

+更新 AND，这是显示/如何运作的jsfiddle

++更新此外，这是一个更新，因为现在您的广告是position:absolute，您可以向其添加bottom:0，它会粘在底部，中间没有像素。

+++更新另一个jsfiddle显示将它对齐到中心并使其粘在底部的确切方法

如何在这个复杂的情况下保持<div>对齐中心以进行浮动广告</div>

1 个答案: