How to align between text and child node with CSS?

Question

I have HTML of the form

<div class="display_archive">
  <div class="campaign">05/01/2016 - <a href="omitted">Back from the Philippines</a></div>
  <div class="campaign">02/28/2016 - <a href="omitted">Special prayer request: Go Philippines</a></div>
  <div class="campaign">02/26/2016 - <a href="omitted>Go Go Year of Big Changes</a></div>
</div>

which looks like

05/01/2016 - Back from the Philippines
02/28/2016 - Special prayer request: Go Philippines
02/26/2016 - Go Go Year of Big Changes

Without changing the HTML, how can I use CSS to align it along the hyphen -? For example, if I wanted to align that hyphen at 1/3 of the containing `div, it might look like:

score 2 · Answer 1 · answered Oct 02 '16 at 19:31

2

You can use display: table with margin: 0 auto on parent.

.display_archive {
  margin: 0 auto;
  display: table;
}

<div class="display_archive">
  <div class="campaign">05/01/2016 - <a href="omitted">Back from the Philippines</a></div>
  <div class="campaign">02/28/2016 - <a href="omitted">Special prayer request: Go Philippines</a></div>
  <div class="campaign">02/26/2016 - <a href="omitted">Go Go Year of Big Changes</a></div>
</div>

answered Oct 02 '16 at 19:31

Nenad Vracar

118,580
15
151
176

This appears to be doing a different thing from what I had in mind, but I think I like it more. If you were to describe it outside the context of my question, what would you call it? – Merchako Oct 02 '16 at 23:36
Not sure what you mean, you just center parent element or `display_archive` in this case relative to `body`. You can do the same thing like this https://jsfiddle.net/Lg0wyt9u/1254/ but i think other solution is better. – Nenad Vracar Oct 03 '16 at 08:45
If you googled this concept to learn more about it, what would you google? – Merchako Oct 12 '16 at 17:44

score 0 · Answer 2 · edited May 23 '17 at 11:48

You can align the anchor tags, instead of the hyphens, like this:

.display_archive {
  display: table;
}
.campaign {
  display: table-row;
}
.campaign a {
  display: table-cell;
  padding-left: .5em;
}

<div class="display_archive">
  <div class="campaign">05/01/2016 - <a href="omitted">Back from the Philippines</a></div>
  <div class="campaign">02/28/2016 - <a href="omitted">Special prayer request: Go Philippines</a></div>
  <div class="campaign">02/26/2016 - <a href="omitted">Go Go Year of Big Changes</a></div>
</div>

It makes the browser treat the outter div like a table and defines your anchor tags as cells. This makes the browser render the text before your anchor tag like a (preceding) table cell. As such, all your anchor tags are aligned in the same (2nd) column.

Here are some useful info on display: table for further reading:

Note that you may have to check if this is supported on IE7 or lower if you need to support those browsers.

How to align between text and child node with CSS?

2 Answers2