时间戳

首页 > 解决方案 > 如何将元素对齐到中心？

html - 如何将元素对齐到中心？

问题描述

我有两个问题。

第一的，

我有一个表单，我试图将所有内容都集中到它的中心，同时将文本与字段的左侧对齐。

我试图将 justify-center 和 align-items 赋予“容器”类和“表单样式”类，但没有任何效果。

部分代码和Codepen链接

.form-style {
  width: 50%;
  position: relative;

   display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;

和，

.container {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  }

第二，

我试图让我的提交按钮获得 100% 的宽度并且什么都没有 - 侧面有空间，

input[type="submit"] {
  display: block;

  background-color: #08ABD9;
  font-family: 'jura', sans-serif;
  font-size: 16pt;
  font-weight: bold;

  height: 40px;
  border: none;
  margin-top: 40px;
  margin-bottom: 0px;
  width: 100%;

    }

标签： htmlformscssflexbox

解决方案

从这里开始：您的代码中存在语法错误。由于display: flex存在不可见字符，无法识别容器上的 。所有的 flex 属性都不起作用。

在此处输入图像描述

所以首先解决这个问题。只需完全删除该行并重新编写display: flex. 您会注意到布局的重大变化。

其次，您的标签/输入容器flex-direction被设置为column。这会垂直堆叠您的表单元素。

#fname, #email-a, #phone, #dropdown, #mrole, #age, #textbox {
    display: flex;
    flex-flow: column wrap;
    width: 100%;
    margin-left: 40px;
}

如果您希望文本和输入连续排列，请使用flex-direction: row.

最后，关于您的提交按钮，您的容器具有左右填充，可防止按钮到达边缘。

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

删除填充规则后，按钮将从边缘延伸到边缘。

推荐阅读