将文本对齐中心两侧

我有两个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

将文本对齐中心两侧

回答

相关问题