Выровнять текст по обе стороны от центра

У меня два 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 и я не знаком с различными способами сделать это.

Источник

3 ответа

Решение

Потому что вы только учитесь HTML Вот простой способ сделать это. но я бы посоветовал вам изучить бутстрап при создании html, и вы также можете узнать HTML здесь. это где я учу 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>

Источник

Для современной технологии выравнивания и позиционирования, изучите 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>

Источник

Добавьте атрибуты стиля или создайте новый класс в 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>

Источник
Другие вопросы по тегам