个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我在尝试对齐按钮时遇到了一些麻烦，想要垂直和水平对齐它们(2 列，3 行)。
这是我在 Photoshop 中设计它的方式:
这是它的样子:
最初前景是居中的，看起来和设计上的一模一样，但是按钮没有正确对齐，所以一个 friend 告诉我我应该用一个 table 来修复它，它做到了，但现在我无法对齐按钮, 有什么建议吗？
下面的 HTML 和 CSS:
.Background {
background: #024068;
position: absolute;
left: 0px;
top: 0px;
width: auto;
height: auto;
z-index: 1;
}
.Foreground {
background: #03609b;
background-repeat: no-repeat;
-webkit-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.75);
width: 50%;
margin: auto;
height: 1153px;
z-index: 2;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
.table {
align-content: inherit;
}
.Button.ButtonTxt {
background: #5fa4d0;
border: none;
-webkit-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.45);
-moz-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.45);
box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.45);
transition: all 0.3s ease 0s;
width: 331px;
height: 159px;
opacity: 1;
z-index: 3;
font-size: 50px;
font-family: "Bebas Neue";
color: rgb(255, 255, 255);
line-height: 1.2;
text-align: center;
text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
}
.Button:hover {
opacity: 0.75;
}
.Button:active {
background-color: #1E5B82;
transition: none;
}<body class="Background">
<div class="Foreground">
<table class="table">
<tr>
<td><input class="Button ButtonTxt" type="button" value="Button1"></td>
<td><input class="Button ButtonTxt" type="button" value="Button2"></td>
</tr>
<tr>
<td><input class="Button ButtonTxt" type="button" value="Button3"></td>
<td><input class="Button ButtonTxt" type="button" value="Button4"></td>
</tr>
<tr>
<td><input class="Button ButtonTxt" type="button" value="Button5"></td>
<td><input class="Button ButtonTxt" type="button" value="Button6"></td>
</tr>
</table>
</div>
</body>最佳答案
我有一个没有表格的解决方案，使用 flex。我为行添加了容器元素(一行中的成对按钮)并使所有内容都成为 DIV。以整页大小查看。
.Background {
background: #024068;
}
.Foreground {
background: #03609b;
background-repeat: no-repeat;
-webkit-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.75);
width: 50%;
margin: auto;
height: 1153px;
display: flex;
flex-direction: column;
justify-content: center;
}
.rowcontainer {
display: flex;
justify-content: space-between;
margin-bottom: 100px;
padding: 0 10px;
}
.Button.ButtonTxt {
background: #5fa4d0;
border: none;
-webkit-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.45);
-moz-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.45);
box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.45);
transition: all 0.3s ease 0s;
width: 331px;
height: 159px;
font-size: 50px;
font-family: "Bebas Neue";
color: rgb(255, 255, 255);
line-height: 159px;
text-align: center;
text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
}
.Button:hover {
opacity: 0.75;
}
.Button:active {
background-color: #1E5B82;
transition: none;
}<body class="Background">
<div class="Foreground">
<div class="rowcontainer">
<div class="Button ButtonTxt" type="button" value="Button1">Button1</div>
<div class="Button ButtonTxt" type="button" value="Button2">Button2</div>
</div>
<div class="rowcontainer">
<div class="Button ButtonTxt" type="button" value="Button3">Button3</div>
<div class="Button ButtonTxt" type="button" value="Button4">Button4</div>
</div>
<div class="rowcontainer">
<div class="Button ButtonTxt" type="button" value="Button5">Button5</div>
<div class="Button ButtonTxt" type="button" value="Button6">Button6</div>
</div>
</div>
</body>关于html - 在 CSS 和按钮对齐方面遇到困难，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42705386/
25
4
0
tuple :: (Integer a,Fractional b) => (a,b,String) tuple = (18,5.55,"Charana") 所以这是给我的错误 ‘Integer’ is
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。 关闭 11 年前。 Improve thi
我已经习惯了python和django，但我最近开始学习java。由于工作原因我没有太多时间，所以错过了很多类(class)，现在我有点困惑，我必须做作业。 编辑 该程序应该根据每个运动员在自行车和比
这是一个困难的问题，但对专业人士来说很容易。 我在 mysql 中有以下字段:产品名称、mycost、sellprice 和 stock。因为我需要知道每种产品对我的商店的投资有多少，所以我创建了以下
我有 3 个表，其中已包含以下行: TBL_TESTER_LIST id tester_type tester_name 1 LMX LMX-01 2 LMX
我想只使用 GridBagLayout 来布局组件，如图所示。 我已经尝试了几个约束，但它永远不会以预期的结果结束，所以我想知道仅使用 GridBagLayout 是否真的可行。难点在于C1、C2、C
我遇到了以下代码没有结果的问题。但是，如果我取消注释掉指定的行，并注释掉它起作用的 bind_param 行，但这不是破坏了 mysqli 的目的吗？我的 var_dump 给了我的字符串(1)“1”
这个问题在这里已经有了答案: a good python to exe compiler? [closed] (3 个答案) 关闭 9 年前。 有了我之前问题的一些有用答案(见下文)，我决定再试一次
我正在使用 Hadoop 分析 GSOD 数据 (ftp://ftp.ncdc.noaa.gov/pub/data/gsod/)。我选择了 5 年来执行我的实验 (2005 - 2009)。我配置了一
我在我的 macOS 应用程序的设置面板中使用 NSGridView。我是这样设置的: class GeneralViewController: RootViewController { pr
我正在尝试使用以下代码在 PHP 中自动安装 WordPress 发行版: $base_dir = '/home/username/wordpress_location'; chdir($base_d
在 Node.js 中将图像转换为 Base64 字符串时，我遇到了一个非常令人困惑的问题 这是我的示例代码: app.get('/image', (req, res) => { ServerAP
我在尝试运行我的应用程序时遇到一些错误，这里是 logcat java.lang.RuntimeException: Unable to instantiate activity Componen
基本上，我正在努力创建一个管理团队和球员的 Java 程序。 根据我的理解，我会有一个团队和一个玩家类。在团队类中会有 get 和 set 方法，以及某种形式的集合来正确存储球员，例如数组列表？然后在
我仍在尝试找出 JavaSwing 中的 BorderLayout，这真的很令人沮丧。 我希望能够将一个 Pane 拆分为 3 个包含的子面板，但我不完全确定如何包含它。 这是我的游戏类，它包含面板
下面的表设计（完整的模式见下文）还有很多需要改进的地方，并且已经造成了许多困难，但是我无法找出如何最好地将它们规范化。这些表格的目的是： ICD9-提供CICD9和CDESC组合的主查找。每个组合在I
这是我的表格: AB元组表 C 表，其中包含 A.id 和 B.id 的条目 D 表，其中包含带有 C.id 的条目和一个 bool 字段“open” 我想计算 D 表中“open”= true 且具
我在 YouTube 上跟踪了一个相当旧的教程，在视频中他以这种方式使用了 mysql_result: return (mysql_result($result,0) == 1) ? true : f
我正在尝试创建一个左侧面板的页面。该面板有一个页眉、一个内容区域和一个页脚。主面板包装器 div 应该是页面高度的 100%。页眉和页脚没有指定的高度，因为我只希望它们足够大以容纳其文本和填充，而我希
我有 TreeView ，我想在其中显示用户通过 file_dialog.getOpenFileNames() 选择的文件； file_dialog 是 QFileDialog。我确实创建了模型类:
我是一名优秀的程序员,十分优秀！