How To Write an Address?

Question

I am trying to write an address on my website. Right now it's just centered, but I want to make the left side of the words align with each other, like on an envelope. What HTML or CSS code can I use to get that?

Here's my current HTML code:

<p id="center">text</p>
<p id="center">text 1</p>
<p id="center">text 2</p>
<p id="center">text 3</p>

Here's my current CSS code:

#center {text-align: center;}

It would be helpful if you would post your HTML & CSS. Text in rtl languages is by default left aligned. If yours is not or is being overridden, `text-align: left` will work. — Paul Redmond, Jul 08 '15 at 15:12
Please update your question with the code. And IDs **must** be unique. — j08691, Jul 08 '15 at 15:14
Use classes instead of IDs. And if you want the text left justified, *then don't center it*. Really? — j08691, Jul 08 '15 at 15:18
I need it centered and justified. Sorry people, I'm new to HTML and CSS and I'm not very good at it! — Alpacasheep, Jul 08 '15 at 15:19
An address isn't multiple paragraphs. A single paragraphs with line breaks (yes, they're semantic in this case, because the line breaks are part of the information). Then you left align. You can position the paragraph however you want. Maybe give it a width then auto margins to center it, but preserve the left-aligned text within. There are numerous ways to accomplish this, but I think this question should be closed. — aaronburrows, Jul 08 '15 at 15:20
Wrap the address in an element, give that a `width` then use `margin: 0 auto, text-align: justify` — Dan Gamble, Jul 08 '15 at 15:25

Pete · Accepted Answer · 2015-07-08T15:39:38.167

4

I would change the structure of your code to use the address tag instead of p tags (each line of an address isn't semantically a paragraph).

Try this:

address {text-align:center;}
address > span {text-align:left; display:inline-block;}

<address>
    <span>
        Address line 1<br />
        A longer address line<br />
        short<br />
        postcode
    </span>
</address>

edited Jul 08 '15 at 15:39

answered Jul 08 '15 at 15:23

Pete

57,112
28
117
166

Instead of spamming `
` (by the way they don't need to be closed, that's only for XHTML - http://stackoverflow.com/questions/1946426/html-5-is-it-br-br-or-br) you can wrap each line in `
` *this is still semantic* – AntonB Jul 08 '15 at 16:19
@AntonB how is using p tag still semantic, a line in an address is not a paragraph so using a br is correct in this case. It is not spamming it is using them properly. If you look at the styling of the address, you would have big spaces in between each line if you used the p tag. Perhaps using a p tag instead of an address tag would be more semantic, but you would still use a br after each line – Pete Jul 09 '15 at 07:48

score 0 · Answer 2 · answered Jul 08 '15 at 15:27

There's several ways to do it depending on the context of your page, but this would be the simplest way.

   <div id="addresswrapper" style="text-align: left">
        Name</br>
        Address One</br>
        Address Two</br>
        City State, Zip
    </div>

How To Write an Address?

2 Answers2