How to align text in html/css

Question

Hi everyone Im new to HTML/CSS and was wondering how I can make something like

N_git_commit: 122e1  DC_git_commit: 1231
N_uptime:2190384987128421 DC_uptime: 2193821042141

into

N_git_commit: 122e1       DC_git_commit: 1231
N_uptime:2190384987128421 DC_uptime: 2193821042141enter code here

I currently have it set up so that each line is under one div such as

<div>
  <span> N_git_commit:201213 </span>
  <span> DC_git_commit:1231  </span>
</div>

etc... Any help would be greatly appreciated!

mm its more of a footer in the overall html so I don't know how a table would work — Nighthee, Feb 09 '16 at 16:14
It's tabular data (at least it looks like it)...use a table. — Paulie_D, Feb 09 '16 at 16:14
Possible duplicate: http://stackoverflow.com/questions/5703552/css-center-text-horizontal-and-vertical-inside-a-div-block — , Feb 09 '16 at 16:16

Nenad Vracar · Answer 1 · 2016-02-09T16:29:06.687

0

You can try CSS Tables

.random-table {
  display: table;
  border: 1px solid black;
}

.random-row {
  display: table-row;
}

.random-row span {
  display: table-cell;
  padding: 5px;
}

.random-row > span:first-child {
  background: #EEEEEE;
}

<div class="random-table">
  <div class="random-row">
    <span> N_git_commit:201213 </span>
    <span> DC_git_commit:1231  </span>
  </div>
  <div class="random-row">
    <span> N_uptime:2190384987128421 </span>
    <span> DC_uptime: 2193821042141enter </span>
  </div>
</div>

edited Feb 09 '16 at 16:29

answered Feb 09 '16 at 16:13

Nenad Vracar

118,580
15
151
176

I tried it and it jumbled the rest of the page...not sure why, but thanks for the input! – Nighthee Feb 09 '16 at 16:22
What do you mean by `jumbled`? – Nenad Vracar Feb 09 '16 at 16:26
Everything else on the page was overlapping with each other and nothing was in place anymore – Nighthee Feb 09 '16 at 16:27
It works better, but the table looks a little weird, but I think I can fix it if I look at the other CSS – Nighthee Feb 09 '16 at 16:32
Sorry but the table is still giving me the same issue as before...The entire thing is wrapped around a 'pull-right' class if that helps? – Nighthee Feb 09 '16 at 16:44

How to align text in html/css

1 Answers1