将文本对齐到中心的两侧

Question

我有两个 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 并且我不熟悉这样做的不同方法。

Answer 1

对于现代对齐和定位技术，了解 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>

Answer 2

因为您刚刚学习 HTML 这里是一个简单的方法。但我建议你在创建 html 时学习 bootstrap。你也可以学习 html HERE 。这是我学习的地方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>

Answer 3

添加样式属性或在 css 中创建新的 class，使它们左右对齐。

    .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>

将文本对齐到中心的两侧

Align text to both sides of center

html

css

css-float

centering