我有一个漂浮的红色泡泡,很像用于谷歌材料设计。
我正在使用Materialisecss进行Web开发。信息可以在我试图实现的浮动红色泡泡上找到:
http://materializecss.com/buttons.html
我已经尝试了所有他们内置的助手为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可以在这里找到:
答案 0 :(得分:4)
假设这是您正在寻找的修复,您的容器需要的宽度大于按钮的宽度,并且从那里您可以添加边距:0 auto;
如上所述,您应首先创建一个小提琴或类似的来演示您的问题。
.center-align {
width: 100%;
}
.btn-floating.btn-large {
margin: 0 auto;
}
更新了您的小提琴:https://jsfiddle.net/2ftu5rqg/3/
我没有注意到那里已经存在的居中类 - 您真正需要的是父容器上的宽度,在此示例中为.center-align。