在div中仅将一个元素居中
小帽子
我有这个HTML代码：
<div>
<input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
<span>Proper format "[email protected]"</span>
</div>
我已经在div上配置了“ text-align：center”，但不幸的span是，文本也居中（请参见下图）。我需要span靠近它而不是居中。
t1m0n
您可能应该将父元素居中div放置，而不是放在表单内部：
.center-form {
text-align: center;
}
.center-form form {
display: inline-block;
text-align: left;
}<div class="center-form">
<form action="">
<div>
<input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
</div>
<div>
<input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
<span>Proper format "[email protected]"</span>
</div>
<div>
<input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
</div>
<button>Submit</button>
</form>
</div>或者，如果您不想span影响表格位置，请使用position: absolute：
.center-form {
text-align: center;
}
.center-form form {
display: inline-block;
text-align: left;
}
.center-form form div {
position: relative;
}
.center-form form div span {
position: absolute;
left: 100%;
top: 0;
/* for demo */
white-space: nowrap;
}<div class="center-form">
<form action="">
<div>
<input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
</div>
<div>
<input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
<span>Proper format "[email protected]"</span>
</div>
<div>
<input id="cemail" type="email" name="email" placeholder="Your E-Mail" required>
</div>
<button>Submit</button>
</form>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
Qt Creator Windows 10 - “使用 jom 而不是 nmake”不起作用
- 2
使用next.js时出现服务器错误，错误：找不到react-redux上下文值；请确保组件包装在<Provider>中
- 3
SQL Server中的非确定性数据类型
- 4
Swift 2.1-对单个单元格使用UITableView
- 5
如何避免每次重新编译所有文件？
- 6
在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID
- 7
Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听
- 8
应用发明者仅从列表中选择一个随机项一次
- 9
在 Avalonia 中是否有带有柱子的 TreeView 或类似的东西？
- 10
HttpClient中的角度变化检测
- 11
在Wagtail管理员中，如何禁用图像和文档的摘要项？
- 12
如何了解DFT结果
- 13
Camunda-根据分配的组过滤任务列表
- 14
错误：找不到存根。请确保已调用spring-cloud-contract：convert
- 15
为什么此后台线程中未处理的异常不会终止我的进程？
- 16
构建类似于Jarvis的本地语言应用程序
- 17
使用分隔符将成对相邻的数组元素相互连接
- 18
您如何通过 Nativescript 中的 Fetch 发出发布请求？
- 19
通过iwd从Linux系统上的命令行连接到wifi（适用于Linux的无线守护程序）
- 20
使用React / Javascript在Wordpress API中通过ID获取选择的多个帖子/页面
- 21
使用 text() 獲取特定文本節點的 XPath
我来说两句