将 HTML5 div 集中在屏幕底部的 CSS

Question

我有以下 HTML5 文档：

<canvas id="myCanvas">
</canvas>
<img id="logo" src="/images/logo.png" style="visibility:collapse" />
<div id="adControl" style="width: 728px; height: 90px; border: solid 1px red; visibility:visible;"
    data-win-control="MicrosoftNSJS.Advertising.AdControl"
    data-win-options="{applicationId: 'xyz', adUnitId: '123'}">
</div>

我正在尝试使广告控件出现在屏幕底部的中心，画布下方。这是我的 CSS：

#adControl {   

    float:left; 

    margin: 0px auto;

}

#myCanvas {

    float:left;

}

我已经为 adcontrol 尝试了各种边距组合，但似乎无法集中它。

Answer 1

在 Windows 8 的 WinJS 应用程序中，您可以使用 -ms-grid 和 -ms-flexbox 来实现。

html:

<div class="mypage fragment">
    <header aria-label="Header content" role="banner">
        <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
        <h1 class="titlearea win-type-ellipsis">
            <span class="pagetitle">My Page</span>
        </h1>
    </header>    
    <section role="main">
        <canvas id="myCanvas">
        </canvas>
        <div class="ad-area-host">
            <div class="ad-area" style="width: 728px; height: 90px; border: solid 1px red; visibility:visible;"
               data-win-control="MicrosoftNSJS.Advertising.AdControl"
               data-win-options="{applicationId: 'xyz', adUnitId: '123'}">
            </div>
        </div>
    </section>
</div>

css:

// some of the css for fragment and section[role=main] already exists in default.css
.fragment 
{
    width: 100%;
    height: 100%;
    /* Define a grid with rows for a banner and a body */
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 128px 1fr;
    display: -ms-grid;
}

.mypage.fragment section[role=main] 
{
    -ms-grid-row: 2;
    display: -ms-grid;
    -ms-grid-rows: 1fr auto;
    -ms-grid-columns: 1fr;
}

.ad-area-host
{
    -ms-grid-row: 2;
    height: 90px;
    display: -ms-flexbox;
    -ms-flex-direction: column;
    -ms-flex-align: center;
}

我没有测试过这个。试试看。这个想法是使用网格在底部对齐广告区域主机。然后，在 ad-area-host div 中使用 -ms-flexbox display 使广告区域居中。

Answer 2

你的意思是这样的吗？

.box {
    width:1024px;
    margin: 0px auto;
}
#adControl {   
    position:fixed;
    bottom:0;
    width: 728px; 
    height: 90px;
    border: solid 1px red; 
    visibility:visible;
}

Answer 3

#adControl {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate( -50%, 0);
    -ms-transform: translate( -50%, 0); 
    -webkit-transform: translate( -50%, 0);
}

你的意思是这样的吗？

Answer 4

或者你的意思是像this这样的东西？

#adControl {   
position: relative;
width: 728px;
margin: 0px auto;
top: 200px;
margin-top: 100px;
height: 90px;
border: solid 1px red;
visibility:visible
}

Answer 5

您实际上应该从下面的 div 中删除 float: left 以使其居中。

试试这个：

 #adControl { 
      clear:left; 
      margin: 0px auto; 
 }

Answer 6

你好，看看这个，

http://jsfiddle.net/SnjWs/1/

如果有帮助请告诉我

#adControl {
    width:728px;
    margin: 0px auto;
    height:90px;
    border: solid 1px red;
    visibility:visible;
}
#myCanvas {
    width:200px;
    border:1px solid black;
}

<canvas id="myCanvas"></canvas>
<img id="logo" src="/images/logo.png" style="visibility:collapse" />
<div id="adControl" data-win-control="MicrosoftNSJS.Advertising.AdControl" data-win-options="{applicationId: 'xyz', adUnitId: '123'}"></div>

Answer 7

我还没有尝试过使用画布，但这应该没关系。 我用它来底部和居中 728x90 的广告

.wideAdTile {
    position: fixed;
    bottom: 0;
    left: 50%;
    margin-left: -364px; /*negative half the width of the ad*/
    width: 728px;
    height: 90px;
    z-index: 1;
}

和html

<div class="wideAdTile" id="wideAd"
    data-win-control="MicrosoftNSJS.Advertising.AdControl"
    data-win-options="{ applicationId: 'd25517cb-12d4-4699-8bdc-52040c712cab', adUnitId: '10043000' }">
</div>