テキストを中央の両側に揃えます

2つのdatalist要素が中央に、テキストの上に、2つのボタンが並んでいます。テキストを中央の両側に揃えます

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

CSS、その後、最初のHTMLの非常に基本を学ん周り方法はありません。あなたのHTMLコードには非常に多くのエラーが含まれていますので、どこで始めるべきかわからない... – connexo

をあなたはそれを行う簡単な方法があり、ここでHTMLを学ぶため。 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

「フレックスボックス」について教えていただきありがとうございます。それは...見栄えがいいよ。 – 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

テキストを中央の両側に揃えます

答えて

関連する問題