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

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

источник

2016-12-02 Nik

Там нет никакого способа вокруг обучения самых основ HTML, а затем CSS. Ваш HTML-код содержит столько ошибок, что я даже не знаю, с чего начать ... – connexo

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

источник

2016-12-02 18:06:55

Все отлично! Благодарю. И я согласен, мне нужно начать копать. – Nik

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

источник

2016-12-02 17:59:40

Благодарим за предоставленную информацию о 'flexbox'. Он выглядит ... изящным. – Nik

Добавить атрибуты стиля или создать новый класс в CSS, который будет выравнивать их влево и вправо.

.left_side{ 
 
\t  float:left; 
 
\t  margin-left:10px; 
 
    } 
 
    .right_side{ 
 
\t  float:right; 
 
\t  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> 
 
    \t <br> 
 
    \t <br> 
 
    \t <br> 
 
    \t <input class="left_side" type="submit"> 
 
     <input class="right_side" type="reset"> 
 
    </form> 
 
</ol>

источник

2016-12-02 18:13:02

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

ответ

Смежные вопросы