将文本对齐到中心的两侧答案

【问题标题】：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 代码包含太多错误，我什至不知道从哪里开始...

标签： html css css-float centering

【解决方案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>

【讨论】：