浮動浮動中心或右對齊

我有一個漂浮的紅色氣泡，很像用於Google的材質設計。浮動浮動中心或右對齊

我正在使用Materializecss進行Web開發。信息可以在這裏找到在浮紅泡我想實現：

我已經嘗試了所有的內置助手對CSS在底部，但沒有運氣移動它中心。這裏是我的html：

<html lang="en"><head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"> 
    <title>Starter Template - Materialize</title> 

    <!-- CSS --> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"> 
    <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"> 
</head> 

<body style="position: relative;"> 
    <div class="navbar-fixed "> 

     <nav class="orange " role="navigation"> 
      <div id="replaceBar" class="nav-wrapper container"> 
       <a id="logo-container" href="#" class="brand-logo">Beer Portfolio</a> 
       <ul class="right hide-on-med-and-down left"> 
        <li><a href="stats.html">Statistics</a></li> 
       </ul> 

       <ul style="left: -250px;" id="nav-mobile" class="side-nav left"> 
        <li><a href="stats.html">Statistics</a></li> 
       </ul> 

       <a href="#" data-activates="nav-mobile" class="button-collapse"><img style="vertical-align: middle;" src="img/menuIcon.png" height="30" width="30"></a> 

       <ul id="search" class="right valign-wrapper"> 
        <li class="valign"> 
         <a href="#"> <img style="vertical-align: middle;" src="img/searchIcon.png" height="30" width="30"></a> 
        </li> 

       </ul> 
      </div> 
     </nav> 


    </div> 


    <div class="collection"><a href="#!" class="collection-item" id="Bitter"><h5 class="orange-text text-darken-2"> Bitter</h5> <div class="right">65% </div> <div class="progress col "> <div class="determinate orange" style="width:65%"> </div> </div></a><a href="#!" class="collection-item" id="Malty"><h5 class="orange-text text-darken-2"> Malty</h5> <div class="right">15% </div> <div class="progress col "> <div class="determinate orange" style="width:15%"> </div> </div></a><a href="#!" class="collection-item" id="Smooth"><h5 class="orange-text text-darken-2"> Smooth</h5> <div class="right">15% </div> <div class="progress col "> <div class="determinate orange" style="width:15%"> </div> </div></a><a href="#!" class="collection-item" id="Dry"><h5 class="orange-text text-darken-2"> Dry</h5> <div class="right">5% </div> <div class="progress col "> <div class="determinate orange" style="width:5%"> </div> </div></a></div><div class="center-align" style="position: fixed; bottom: 0;"> <a id="redCircle" class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a></div> 




    <!-- Modal Structure For loading beer--> 
    <div style="z-index: 1003; display: none; opacity: 0; transform: scaleX(0.7); top: 0px;" id="modal1" class="modal"> 
     <div class="modal-content center"> 
      <div> 
       <span class="card-title">Loading Taste Tags</span> 
      </div> 
      <div id="load" class="preloader-wrapper big active "> 
       <div class="spinner-layer spinner-yellow-only"> 
        <div class="circle-clipper left"> 
         <div class="circle"></div> 
        </div> 
        <div class="gap-patch"> 
         <div class="circle"></div> 
        </div> 
        <div class="circle-clipper right"> 
         <div class="circle"></div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

<div style="left: 0px;" class="drag-target"></div><div class="hiddendiv common"></div></body></html>

我的CSS我使用的可以在這裏找到：

http://pastebin.com/bHW6Fzp3

來源

2015-07-11 searayman

做出小提琴請.. –

小提琴：https://jsfiddle.net/2ftu5rqg/1/ – searayman

假設這是你正在尋找修復，您的容器需要有一個寬度大於按鈕的寬度，並從那裏你可以添加保證金：0 auto;

如上所述，您應該首先創建一個小提琴或類似物來演示您的問題。

.center-align { 
    width: 100%; 
} 

.btn-floating.btn-large { 
    margin: 0 auto; 
}

更新您的提琴：https://jsfiddle.net/2ftu5rqg/3/

我沒有注意到定心類是已經在那裏 - 你真正需要的是父容器，在這個例子中是.center-上的寬度對齊。

來源

2015-07-11 20:54:45 smithml

我嘗試添加該直列現在MYB utton不再浮動，但它的中心：的html + =「

「; } – searayman

請參閱上面的內容，我在回答中更新了小提琴 - 希望這會有所幫助。 – smithml

浮動浮動中心或右對齊

回答

相關問題