將文本對齊中心兩側

我有兩個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這裏有一個簡單的方法來做到這一點。但是我建議你在創建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

將文本對齊中心兩側

回答

相關問題