Fatal编程技术网
  • html/
  • Html 文本对齐：即使在设置“显示：块”后居中也不工作

Html 文本对齐：即使在设置“显示：块”后居中也不工作

html css layout

Html 文本对齐：即使在设置“显示：块”后居中也不工作,html,css,layout,Html,Css,Layout,我正在尝试将表单内容居中，但即使为表单容器设置了display:block，然后应用text align:center，它也不起作用；我做了另一项关于放置填充的工作：0 33%它将表单内容居中，但不同的视图端口大小会缩小文本框大小。我希望表单元素居中，并希望它们占据容器大小，请解释为什么会发生这种情况，以及我忽略了什么。我希望它能够适用于所有视图端口大小.我想知道导致这种情况的原因，它甚至会覆盖内联代码 CSS #Banner{ background:url('http:/

我正在尝试将表单内容居中，但即使为表单容器设置了display:block，然后应用text align:center，它也不起作用；我做了另一项关于放置填充的工作：0 33%它将表单内容居中，但不同的视图端口大小会缩小文本框大小。我希望表单元素居中，并希望它们占据容器大小，请解释为什么会发生这种情况，以及我忽略了什么。我希望它能够适用于所有视图端口大小.我想知道导致这种情况的原因，它甚至会覆盖内联代码

CSS

 #Banner{
         background:url('http://i67.tinypic.com/midkki.png') no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
         width:100%;
         min-height:960px;


         }
         #Menu{
          min-height:120px;

         }
         body,html{
         padding:0;
         margin:0;
         }
         .nopm{
         padding:0;
         margin:0;
         }
        #Menu ul{
          padding:0;
         margin:0;



         }
        #Menu li{
         list-style:none;
         float:left;
         padding:1em .3em;
         float:left;
         margin:2em 0;

         }
         #Menu a{

           text-decoration:none;
           font-family: Rockwell,Courier Bold,Courier,Georgia,Times,Times New Roman,serif; 
        font-size: 24px;
        font-style: normal;
        font-variant: normal;
        font-weight: 600;
        line-height: 28px;
        color:#fff;
        margin:1em .5em;
        padding:10px;
        border:2px solid #fff;

         }
         a:hover{ 

          border:4px solid #FFD700;
            -webkit-transition-delay: 2s; /* Safari */
        transition-delay: 2s;
         }
           @media (max-width:420px){

        li{

            width:100%;
      text-align:center;

        }
          img{
       display:block;
       width:90px;
       height:90px;
       margin:0 auto;
      }
      }
    h1,h3{color:#fff;
        text-align:center;

        }
        #Slogan
    {
    padding:2em 0;
    }
    #SignUpWrapper{
    width:100%;
     text-align: center;
    display:block;
    }
    form{

    width:100%;
    }
    input[type="text"],[type="email"],[type="password"]{
    font-family: Rockwell,Courier Bold,Courier,Georgia,Times,Times New Roman,serif; 
        font-size: 19px;
        font-style: normal;
        font-variant: normal;
        font-weight: 600;
        line-height: 25px;
        color:#000 !important;
    padding:.5em;
    width:100%;

    }
HTML

<body>
<div id="Banner">
<div id="Menu">
<div class="row nopm">
<div class="col-lg-3 col-md-3 col-sm-2">
</div>
 <div class="col-lg-1 col-md-1 col-sm-1">
   <img src="http://i66.tinypic.com/xpon69.png" />
 </div>
 <div class="col-lg-3 col-md-1 col-sm-1">
</div>
<div class="col-lg-3 col-md-5 col-sm-7">
    <ul>
        <li>
            <a href="#">Events</a>
        </li>
        <li>
            <a href="#">Login</a>
        </li>
    </ul>
</div>
<div class="col-lg-2 col-md-2 col-sm-1">
</div>
</div>

</div>
<div id="Slogan">
<div class="row nopm">
<div class="col-lg-4 col-xs-12">
</div>
<div class="col-lg-4 col-xs-12">

<h1>
Welcome to Meet Up Place
</h1>
<h3>
SignUp to create your own events
</h3>
</div>
<div class="col-lg-4 col-xs-12">
</div>
</div>
</div>
<div id="SignUp">
<div class="row nopm">
<div class="col-lg-4  col-md-4 col-sm-4 col-xs-12">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div id="SignUpWrapper">
                    <form  autocomplete="on">
                        <div class="InputWrapper"> 
                            <div class="input-group">
                                <label for="fName" style="    display: block;text-align:center;">First Name</label>
                            </div>
                            <div class="input-group">
                                 <input class="form-control" id="fName" type="text" placeholder="First Name"   >
                             </div>
                        </div>
                        <div class="InputWrapper"> 
                            <div class="input-group">
                            <label for="lName">Last Name</label>
                            </div>
                                <div class="input-group">
                            <input id="lName" type="text" placeholder="Last Name" />
                            </div>
                        </div>
                        <div class="InputWrapper"> 
                              <div class="input-group">
                            <label for="lName">E-Mail</label>
                                </div>
                                <div class="input-group">
                            <input id="lName" type="email" placeholder="E-Mail" />
                                </div>
                        </div>


                    </form>
                </div>

</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
</div>
    </div>
        </div>
</div>
</body>



    

  • 

    • 

  • 

    • 


欢迎来到相聚的地方
注册以创建您自己的活动
名字
姓
电子邮件
Put
显示：内联块和删除
宽度：100%表单上执行code>，它就可以工作了



如果要使内部内容居中，请尝试以下操作：


.input-group { display: block !important; }
.form-control, input[type="text"], [type="email"], [type="password"] { text-align : center !important;}


我使用
！重要信息
，因为样式在HTML面板中，而不是CSS面板中

将应用您的内联样式：


在CSS代码中添加此选项，以使所有表单行居中：


    .input-group {
       margin: 0 auto;
    }



    

  • 这是在div的中间
    • 


或


    

  • 这是为了放大div，以便文本可以居中
    • 

寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码，最好是以最短的格式。想把演示缩小到一个合理的大小吗？@Paulie\u D我不知道是否有其他代码覆盖了它或其他什么东西。这就是我丢弃整个代码的原因。它并不复杂。我在这里看到了更混乱的东西，并帮助人们使用它。我减少了它的css和纯粹相关的html内容。甚至文本对齐以内联形式给出的中心不适用于此处，即使内联代码不起作用，那么内联代码之所以能够正常工作的原因是什么，因为它被赋予了更高的优先级？请检查：我使用CSS面板，因此我被迫放置
！重要信息
，以使其正常工作。否则，它将采用HTML面板中的样式，在
之间好的，但我所做的有什么错？为什么内联样式没有应用？我已经制作了一个屏幕截图，向您显示应用了内联样式。是的，但内联样式显示已应用，但它没有使文本居中。Francisco是什么导致内联文本对齐的覆盖：居中语句。对其进行Upvote将给出解决方案如果你向我解释为什么我的代码不起作用，请接受作为答案。是的，正是因为divs.input组的宽度（文本的大小相同，所以不能居中），我才要问这个问题。您可以设置。输入组宽度：100%，它也将工作。马科斯，你说得对。

    .input-group {
       width: 100%;
    }