将文本对齐到中心的两侧
Posted
技术标签:
【中文标题】将文本对齐到中心的两侧【英文标题】：Align text to both sides of center 【发布时间】：2017-04-17 17:13:43 【问题描述】：我有两个在中间对齐的 datalist 元素，它们上方的文本和两个按钮。
body
background-color: DarkGray;
h1
color: black;
font-size: 30px;
font-family: 'lucida console'
span
color: #443431;
font-weight: bold;
font-family: 'Courier New'
<ol style="text-align:center; list-style-position:inside;">
<h1>Ref</h1>
<form name="ref" onsubmit="return generateLink();">
<span>PiCK</span>
<br>...
<br>
<br>
<span>PiCK #2</span>
<br>...
<br>
<br>
<input type="submit">
<br>
<input type="reset">
</form>
</ol>我想要的是：
关于如何处理它的任何建议？这几乎是我第一次使用html，我不熟悉这样做的不同方式。
【问题讨论】：
没有办法先学习 HTML 的基础知识，然后再学习 CSS。您的 HTML 代码包含太多错误，我什至不知道从哪里开始... 【参考方案1】：因为您刚刚在HTML 学习，这是一种简单的方法。但我建议您在创建html 时学习引导程序。也可以学习htmlHERE。这是我学习 HTML 的地方
<!DOCTYPE html>
<html>
<ol style="text-align:center; list-style-position:inside;">
<head>
<title>Ref</title>
<style>
body background-color: DarkGray;
h1 color: black; font-size: 30px; font-family: 'lucida console'
span color:#443431 ; font-weight: bold; font-family: 'Courier New'
</style>
</head>
<body>
<h1>Ref</h1>
<form name="ref" onsubmit="return generateLink();">
<div style="margin: 0 auto; width:500px;">
<div style="float:left;"><span>PiCK</span><br>
<input type="text">
</div>
<div style="float:left; margin-left:10px; margin-right: 10px; margin-top:40px;">
<input type="submit"><br>
<input type="reset">
</div>
<div style="float:left;">
<span>PiCK</span><br>
<input type="text">
</div>
</div>
</form>
</ol>
</body>
</html>【讨论】：
效果很好！谢谢。我同意，我确实需要开始挖掘。【参考方案2】：对于现代对齐和定位技术，了解 CSS flexbox：
form
display: flex;
flex-direction: column;
form > div
display: flex;
justify-content: space-around;
form > div > div
display: flex;
flex-direction: column;
align-items: center;
form > input
align-self: center;
margin-top: 10px;
h1
text-align: center;
<h1>Ref</h1>
<form>
<div>
<div>
<span>PICK</span>
<input>
</div>
<div>
<span>PICK #2</span>
<input>
</div>
</div>
<input type="submit">
<input type="reset">
</form>【讨论】：
感谢您让我知道flexbox。它看起来……很漂亮。【参考方案3】：
添加样式属性或在 css 中创建一个新类，将它们左右对齐。
.left_side
float:left;
margin-left:10px;
.right_side
float:right;
margin-right:10px;
<ol style="text-align:center; list-style-position:inside;">
<h1>Ref</h1>
<form name="ref" onsubmit="return generateLink();">
<span class="left_side">PiCK</span>
<span class="right_side">PiCK #2</span>
<br>
<br>
<br>
<input class="left_side" type="submit">
<input class="right_side" type="reset">
</form>
</ol>【讨论】：
以上是关于将文本对齐到中心的两侧的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap 将图标对齐到左侧，将文本对齐到顶部栏的中心