html - 如何使用 CSS 将以下框居中

标签 html css css-float

<分区>

我正在尝试将框水平居中。当前,它们向左对齐,当您调整窗口大小时,它们会响应地移动。我仍然想保留该功能。即使调整窗口大小时,我也只想将框居中。我试过 float:center 但没有这样的东西......谢谢。

http://jsfiddle.net/9BB36/9/

.mybtn {
font:bold 20px"Arial Black", Gadget, sans-serif;
font-style:normal;
color:#ffd324;

background-color: rgba(255,0,0,.90);
border:2px solid #000;
text-shadow:0px -1px 1px #222222;
box-shadow:0px 0px 12px #2e2300;
-moz-box-shadow:0px 0px 12px #2e2300;
-webkit-box-shadow:0px 0px 12px #2e2300;
border-radius:15px 15px 15px 15px;
-moz-border-radius:15px 15px 15px 15px;
-webkit-border-radius:15px 15px 15px 15px;
width:100px;
height:100px;
margin:5px;
float:left;
position:relative;
}

和 HTML

<div class="mybtn">

</div>

<div class="mybtn">

</div>

<div class="mybtn">

</div>

<div class="mybtn">

</div>

<div class="mybtn">

</div>

最佳答案

您可以将它们包装在一个 div 中,对其应用 text-align:center,然后移除 .mybtn div 上的 float 并将显示更改为内联- block 。

#wrapper {
    text-align:center;
}

jsFiddle example

关于html - 如何使用 CSS 将以下框居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24897352/

上一篇:Css 适用于 html 复选框控件,不适用于 asp.net 复选框控件

下一篇:jquery - 将 div 滚动到 div 的 CSS 过渡

相关文章:

javascript - 找不到div的第一个直接子元素

php - 仅适用于移动设备的 CSS,无需任何指示

Css float 问题

css - 强制 float 元素在新行中开始

javascript - 如何摆脱 Cordova 应用程序中的 Windows 标题栏

javascript - 根据选择标签选择显示多个div

html - Opera 错误溢出 :hidden & position:absolute viewport-size

CSS 省略号不适用于此 div

css - 将按钮对齐到进度条的右侧

html - 在自定义类 Bootstrap 4 的 Sass 中使用边距和填充变量