在 CSS 和按钮对齐方面遇到了麻烦

Posted

技术标签:

【中文标题】在 CSS 和按钮对齐方面遇到了麻烦【英文标题】：Having a bad time with CSS and button aligment 【发布时间】：2017-07-31 00:44:36 【问题描述】：

我在尝试对齐按钮时遇到了一些麻烦，我想将它们垂直和水平对齐（2 列，3 行）。

这是我在 Photoshop 中的设计方式：

它的外观是这样的：

最初前景是居中的，看起来和设计上的一模一样，但是按钮没有正确对齐，所以一个朋友告诉我应该使用表格来修复它，它确实如此，但现在我无法对齐按钮，有什么建议吗？

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>

【问题讨论】：

你为什么用桌子？看起来不像表格数据。如果你喜欢使用 flexbox，你应该使用 flex 而不是 table，它会让事情变得更容易。 How to Create Grid/Tile View with CSS?的可能重复 .Background上绝对定位的目的是什么？除了设置背景颜色之外似乎没有必要。 【参考方案1】：

我有一个没有表格的解决方案，使用 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>

【讨论】：

非常感谢，正如其他用户所说，我决定放弃表格并改用您的方法。它完美地工作，甚至不知道这一点，肯定会更多地研究它！再次感谢您！【参考方案2】：

我对您的代码做了一些更改（如果您想在此处继续使用表格）。

我在td 中添加了一个单元格间距，您可以根据自己的喜好进行调整。

我还减小了按钮文本的字体大小（很大）

我将前景的比例提高到 80%（您也可以根据自己的喜好调整）

.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: 80%;
  margin:auto;
  height: 1153px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;

table 
    align-content: inherit;

table.table td 
  margin: 10px 10px 10px 10px;

table.table 
  border-collapse: separate;
  border-spacing: 50px;
  *border-collapse: expression('separate', cellSpacing = '15px');
  

.Button.ButtonTxt 
  height: 50px;
  width: 100px;
  color: red;
  border: none;
  background: #5fa4d0;
  opacity: 1;
  z-index: 3;
  font-size: 16px;
  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);
  -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;

.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>

【讨论】：

【参考方案3】：

您的代码非常完美，我建议使用 flexbox 而不是表格。 但是，如果您还想在这里使用表格（只需调整您的代码以适应 PS 模型）

.Background 
  background: #024068;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: auto;
  z-index: 1;
  display: flex;
  justify-content: center;


.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);
  height: 710px;
  width: 600px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-around;

.table
    align-content: inherit;
    border-spacing: 130px 80px;
    border-collapse: separate;

.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: 212px;
  height: 100px;
  opacity: 1;
  z-index: 3;
  font-size: 50px;
  font-family: "Libre Franklin";
  font-size: 22px;
  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;



<head>  <link href="https://fonts.googleapis.com/css?family=Libre+Franklin" rel="stylesheet"></head>
<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>

【讨论】：

【参考方案4】：

首先：table标签是一种存储表格数据的方法，不是用来布局页面的，所以不应该这样使用。

这是实现您想要的另一种方式：

在你的 CSS 中添加这个：

.left-side 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    float: left;
    height: 200px;


.right-side 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    float: right;
    height: 200px;

并将您的 HTML 更改为：

<body>
<div class="Foreground">
    <div class="left-side">
        <input class="Button ButtonTxt" type="button" value="Button1">
        <input class="Button ButtonTxt" type="button" value="Button2">
        <input class="Button ButtonTxt" type="button" value="Button3">
    </div>
    <div class="right-side">
        <input class="Button ButtonTxt" type="button" value="Button4">
        <input class="Button ButtonTxt" type="button" value="Button5">
        <input class="Button ButtonTxt" type="button" value="Button6">
    </div>
</div>

这将创建两个 div，一个用于左侧按钮，一个用于右侧按钮。然后它使用 flex 设置它们的样式，将它们像列一样布局。如果您希望按钮之间的距离更近或更远，请在 CSS 中更改 .left-side 和 .right-side 的 height 属性。

让我知道这是否适合您的需求

【讨论】：

最终改用 Johannes 的方法，因为它更容易理解，尽管和你一起，我知道我不应该使用表格来布局页面，所以我也感谢你，并试图帮助我！ @Azazel 没问题，很高兴您的问题得到解决

以上是关于在 CSS 和按钮对齐方面遇到了麻烦的主要内容，如果未能解决你的问题，请参考以下文章

在动态创建单选按钮方面需要帮助

CSS：在单选按钮后对齐多行文本

HTML/CSS 按钮和 A 链接垂直对齐

我在 xcode6.4 中找不到对齐和固定按钮来调整方面适合的约束

使用 CSS HTML 垂直对齐提交按钮

Input标签与图片按钮水平对齐解决方法