Html 如何将字段与标题内的文本对齐_Html_Css

Html 如何将字段与标题内的文本对齐

html css

Html 如何将字段与标题内的文本对齐,html,css,Html,Css,这是我正在处理的一个简单页面的缩减。我正在尝试将图像、用户名、密码和登录按钮与E from Enter对齐。无论我做什么，它们都会贴在页面的左侧，不会移动。我需要用特殊的对齐方式将它们绑到入口吗 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bo

这是我正在处理的一个简单页面的缩减。我正在尝试将图像、用户名、密码和登录按钮与E from Enter对齐。无论我做什么，它们都会贴在页面的左侧，不会移动。我需要用特殊的对齐方式将它们绑到入口吗

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>


<style>
.text-box {
  text-align: left;
  width: 300px;
  position: center;
}


.btn {
 font-size: 14px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}
</style>


.文本框{
文本对齐：左对齐；
宽度：300px；
位置：中心；
}
.btn{
字体大小：14px；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}


进入
试验


用户名*
密码*
登录

我不得不做很多修改，因为您的布局确实写得不太好，看起来您是在从一本非常古老的指南（我猜是W3）学习编写HTML。你不应该使用像

或

这样的东西。你越早开始将样式视为块，而不是像word文档中那样将文本对齐，就越好

但我在这里做的是从标题中删除格式，左对齐，然后给它和表单一个固定宽度和自动边距：

。文本框{
文本对齐：左对齐；
宽度：300px；
位置：中心；
}
.btn{
字体大小：14px；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
#头衔{
保证金：自动；
宽度：250px；
}
形式{
保证金：0自动；
宽度：250px；
}


进入


用户名*
密码*
登录

你的问题还不太清楚，我不知道你说的“与E对齐”是什么意思。Enter这个词出现在页面顶部的标题中。是的，你这是什么意思？什么意思？将它们与div中的一个字母对齐，而不是全部对齐？你能勾勒出你想要它做什么吗？文本框和按钮的左侧应该和E-in-Enter在同一条上下对齐。如果你仔细查看StackOverFlow编辑器选项，你实际上可以呈现人们更容易理解的工作代码。除了这个，还可以链接到JsBin或其他云IDE。太棒了！是否有简单的调整将单词Test与Enter放在同一行上？这意味着把Enter（和它下面的东西）拉回到左边一点。哦，我看到你把Test这个词去掉了！是的，那应该是输入部分的右半部分。@John我把它拿出来，因为它的格式非常错误，我正在写你现在将如何把它放进去，你也打算在下面测试一个表单吗？@John我建议你自己研究一下这个东西。谷歌的“垂直中心元素”之类的东西，一切都很好covered@John检查代码笔以进行最终编辑

 <img src="" width="200" height="300"/>
  <div class="login-header">
    
    <h2 id="title" align="center">
    Enter   
    &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;     
    Test
    </h2>
      <br>
  </div>

  <form onsubmit="return false;" method="post">
    <div class="form-group text-box" align="center">
          
     <label for="name">User Name*</label>
      <input
        type="email"
        class="form-control"
        id="email">
    </div>
    <div class="form-group text-box">
      <label for="name">Password*</label>
      <input
        type="password"
        class="form-control"
        id="password"
        placeholder="Enter your password">
    </div>
    
      <button
      type="submit"
      id="btn-login"
      class="btn btn-primary btn-block button">
        Sign In
    </button>
    <br>
    
    <hr>
  
  </form>