Question

我有一个漂浮的红色泡泡，很像用于谷歌材料设计。

我正在使用Materialisecss进行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

Answer 1

假设这是您正在寻找的修复，您的容器需要的宽度大于按钮的宽度，并且从那里您可以添加边距：0 auto;

如上所述，您应首先创建一个小提琴或类似的来演示您的问题。

.center-align {
    width: 100%;
}

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

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

我没有注意到那里已经存在的居中类 - 您真正需要的是父容器上的宽度，在此示例中为.center-align。

浮动div中心或右对齐

1 个答案: