个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
31
4
我正在尝试使表单内容居中。但是即使在为表单容器设置了 display:block 然后应用 text-align:center 之后它也不起作用；我做了另一项工作 put padding:0 33% 它将居中表单内容，但具有不同的视口(viewport)大小，它会缩小文本框的大小。我想将表单元素居中并希望它们占据容器大小，请解释为什么会发生这种情况以及我忽略了什么。我希望它能够适用于所有视口(viewport)大小。我想知道导致这种情况甚至覆盖内联代码的原因
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>
最佳答案
在 form 上放置 display: inline-block; 并删除 width: 100%; 并且它起作用了。
如果你想让内部内容居中，试试这个:
.input-group { display: block !important; }
.form-control, input[type="text"], [type="email"], [type="password"] { text-align : center !important;}
我使用 !important 因为样式在 HTML 面板而不是 CSS 面板中。
您的内联样式已应用:
关于html - 文本对齐 :center not working even after setting display:block，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36621081/
31
4
0
我的 blockly.js 文件中有以下代码 Blockly.Blocks['account_number'] = { // Other type. init: function() {
首先抱歉我的英语不好，我正在开发 Image Splitter 应用程序并且已经完成，但是现在的要求是当图像被分割(分成几 block /chunks)那么图像 block 的每一 block (ch
#value: 消息的返回值，当发送到一个 block 时，是该 block 中最后一句话的值。所以 [ 1 + 2. 3 + 4. ] value 计算结果为 7。我发现有时很难使用。有没有办法显式
我想构建一个包含 3 div 的响应式导航栏相同的 width和 height . 我申请了 inline-block到每个 block ，我得到一个我不理解的行为。 问题是，第三 block 由 2
我希望使用 Blockly 来允许非技术人员用户指定测试脚本。 它的一部分需要一个文件选择器，但是，我看不到 Blockly 有一个。是吗？ 实际上，我找不到完整的标准 block 列表。谁有网址？
仅当您位于父 block 内部时，父 block 的 props.isSelected 才为 true，但当您在该 block 的 innerBlocks 内进行编辑时则不然。 如何从父 block
仅当您位于父 block 内部时，父 block 的 props.isSelected 才为 true，但当您在该 block 的 innerBlocks 内进行编辑时则不然。 如何从父 block
我想创建一个具有不同背景颜色 block 和不同悬停颜色 block 的导航栏 block 。我可以分别创建不同的悬停颜色 block 或不同的背景颜色 block ，但不能一起创建。所以请告诉我如何
我正在使用看到的代码 here定期执行代码: #define DELAY_IN_MS 1000 __block dispatch_time_t next = dispatch_time(DISPATC
为什么 block 必须被复制而不是保留？两者在引擎盖下有什么区别？在什么情况下不需要复制 block (如果有)？ 最佳答案 通常，当您分配一个类的实例时，它会进入堆并一直存在，直到它被释放。但是，
我想弄清楚我这样做是否正确: 如果我有一个 block ，我会这样做: __weak MyClass *weakSelf = self; [self performBlock:^{
我想制作一个 4 block 导航菜单，虽然我已经显示了一个 block ，然后单击打开第二个 block ，从第二个开始选择并再次单击出现第三个 block ，第四个 block 相同...这是我的
例如，这样更好吗？ try { synchronized (bean) { // Write something } } catch (Int
我想让一只乌龟检查前方小块的颜色并决定移动到哪里。如果前面的补丁不是白色的，那么乌龟向左或向右旋转并移动。我的 If 决策结构中出现错误，显示“此处应为 TRUE？FALSE，而不是 block 列表
我想创建一个 block 对角矩阵，其中对角 block 重复一定次数，非对角 block 都是零矩阵。例如，假设我们从一个矩阵开始: > diag.matrix [,1] [,2] [
我是区 block 链新手。突然我有一个问题，我们是否可以通过区 block 号来访问以太坊区 block 链上之前的区 block 数据。 例如我创建了一个block1、block2。 block
我是区 block 链新手。突然我有一个问题，我们是否可以通过区 block 号来访问以太坊区 block 链上之前的区 block 数据。 例如我创建了一个block1、block2。 block
我创建了一个等距环境，全部使用 Javascript 和 HTML5 (2D Canvas)，大部分情况下工作正常。我面临的问题是使用不同高度的图 block ，然后对图 block 上的对象索引进行
这是令我困惑的代码: public Integer getInteger(BlockingQueue queue) { boolean interrupted = false; try
我有一个基于 TPL 数据流的应用程序，它仅使用批处理 block 和操作 block 就可以正常工作。 我已经添加了一个 TransformBlock 以尝试在发布到批处理 block 之前从源中转
我是一名优秀的程序员,十分优秀！