Question

我已经附加了我到目前为止的HTML和CSS，但我是前端的新手，所以我不确定最好的方法是什么。

我只想让每个文本元素与它们下面的相应数字对齐。

＆＃13;

h1 {
  font-family: 'Biryani', sans-serif;
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      padding: 50px;
}

ul {
    text-align: justify;
}
ul:after {
    content: '';
    display: inline-block;
    width: 100%;
}
ul:before {
    content: '';
    display: block;
    margin-top: 0em;
}
li1 {
	font-family: 'Biryani', sans-serif; 
    font-size: 14px;
    font-weight: light;
    color: #929292;
    display: inline-block;
    margin-left: 10em;
    margin-right: 13em;
    position: relative;
    top: 1.25em;
}

li2 {
	font-family: 'Biryani', sans-serif; 
    font-size: 16px;
    font-weight: light;
    color: #929292;
    display: inline-block;
    margin-left: 10em;
    margin-right: 13em;
    position: relative;
    top: 1.25em;
}

＆＃13;

<!DOCTYPE HTML>
<html>
   <head>
      <title> REALSURF</title>
  <link rel="stylesheet" type="text/css" href="realsurfcss.css">
  <link href="https://fonts.googleapis.com/css?family=Biryani:300,400,800" rel="stylesheet">
  </head>
   <body>
      
      <h1>
      REALSURF
      </h1>
      
      <ul>
      <li1>Wind</li1>
      <li1>Wave Height</li1>
      <li1>Tide</li1>
      </ul>
   
      <ul>
      <li2>6</li2>
      <li2>3-4</li2>
      <li2>1.8^</li2>
      </ul>

   </body>
</html>

＆＃13;

Answer 1

使用Ruby注释最简单，但它只适用于更现代的浏览器：

＆＃13;

body {
  font-size: 30px;
}

＆＃13;

<ruby>
  5<rp>(</rp><rt>text</rt><rp>)</rp>
</ruby>
<ruby>
  1-2<rp>(</rp><rt>text</rt><rp>)</rp>
</ruby>
<ruby>
  8<rp>(</rp><rt>text</rt><rp>)</rp>
</ruby>

＆＃13;

Answer 2

简单地说，将每列元素包装在同一个块中，并将其属性 text-align 设置为CSS中的 center 。

这是一种使用CSS＆＃flex; https://css-tricks.com/snippets/css/a-guide-to-flexbox/）

的方法

＆＃13;

.container {
  display: flex;
  width: 100%;
}
.column {
  text-align: center;
  flex-grow: 1;
}

＆＃13;

<div class="container">
    <div class="column">Text<br />Number</div>
    <div class="column">Text<br />Number</div>
    <div class="column">Text<br />Number</div>
</div>

＆＃13;

您也可以使用表格来查看：

＆＃13;

table {
  width: 100%;
}
td {
  text-align: center;
}

＆＃13;

<table>
<tr>
  <td>Text<br/>Number</td>
  <td>Text<br/>Number</td>
  <td>Text<br/>Number</td>
</tr>
</table>

＆＃13;

您询问了每行的样式，您需要做的就是在每个元素中包装每一行，如下所示：

＆＃13;

.container {
  display: flex;
  width: 100%;
}
.column {
  text-align: center;
  flex-grow: 1;
}
.text {
  font-weight: bold;
  font-family: Helvetica;
  color: red;
}
.number {
  font-size: 18px;
  margin-top: 16px;
  color: green;
}

＆＃13;

<div class="container">
    <div class="column">
        <div class="text">Text</div>
        <div class="number">Number</div>
    </div>            
    <div class="column">
        <div class="text">Text</div>
        <div class="number">Number</div>
    </div>    
    <div class="column">
        <div class="text">Text</div>
        <div class="number">Number</div>
    </div>    
</div>

＆＃13;

Answer 3

使用伪元素after JSFiddle

li{
  display: inline-block;
  padding: 0 20px;
  font-size: 50px;
  position: relative;
  line-height: 90px;
}

li:before{
  content: 'text';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
  font-size: 12px;
  line-height: 12px;
  text-align: center;
}

如何将每个元素与其上方的元素对齐？

3 个答案: