David Owens David Owens - 1 month ago 8
CSS Question

How do I center each element with the element above it?

I have attached the HTML and CSS I have so far but I am new to front end so I'm not sure what the best approach is.

I just want each text element to be aligned with the respective numbers underneath them.



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;
}

<!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>





For example: In the image I would like the left "text" to be center aligned with the 5, the center "text" centered with the 1-2, and the right "text" to be centered with the 8.

Answer

Simply, wrap each columns of elements in the same block and set it's property text-align to center in CSS.

Here is an approach using CSS's flex (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

.container {
  display: flex;
  width: 100%;
}
.column {
  text-align: center;
  flex-grow: 1;
}
<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>


You can also do that with tables, take a look:

table {
  width: 100%;
}
td {
  text-align: center;
}
<table>
<tr>
  <td>Text<br/>Number</td>
  <td>Text<br/>Number</td>
  <td>Text<br/>Number</td>
</tr>
</table>