Inline div broken when in p element

Question

I want to have an inline div within text, so that the div contains two lines of text aligned vertically.

The initial solution:

div.chinese-word {
    display: inline-block;
}

div.chinese-word div {
    text-align: center;
}

This is a Chinese word <div class="chinese-word"><div>wǒ</div><div>我</div></div> in an inline div

However, it gets broken whenever I put it inside p paragraph. (it might not be the only case).

Invalid!

div.chinese-word {
    display: inline-block;
}

div.chinese-word div {
    text-align: center;
}

<p>This is a Chinese word <div class="chinese-word"><div>wǒ</div><div>我</div></div> in an inline div</p>

It does not even pass validation. I found out that p must contain inline elements only so I switched to spans. But no matter what styling I use, I can't get the same result.

span.chinese-word {
    display: inline-block;
}

span.chinese-word span {
    text-align: center;
}

<p>This is a Chinese word <span class="chinese-word"><span>wǒ</span><br/><span>我</span></span> in an inline span</p>

Clearly, the texts in spans are not horizontally centered anymore. (Both lines appear to be left-aligned).

The p element might have its own styling so I don't want to manipulate it and rather need context-independent solution.

Start here: https://validator.w3.org/nu/ — Your HTML has errors in it. — Quentin, Feb 03 '16 at 15:56
@Quentin: I fixed the snippets. Now they are valid HTML, but it didn't solve the problem. — Danio, Feb 03 '16 at 16:01
You can't have a div element inside a paragraph! Your snippets are still invalid HTML! — Quentin, Feb 03 '16 at 16:08
@Quentin You are just restating the same thing as me, but I have edited the question to clarify my point. Note that I know that second snippet is invalid. — Danio, Feb 03 '16 at 16:14

Chris Pickford · Answer 1 · 2016-02-03T16:19:07.853

2

Given your initial fiddle, replace the <div>s with <span>s and update your CSS to the following:

span.chinese-word {
    display: inline-block;
    position: relative;
    top: 0.5em;
}

span.chinese-word span {
    display: block;
    text-align: center;
}

Gives the effect I believe you are after.

https://jsfiddle.net/chrispickford/8n3hcvkL/3/

edited Feb 03 '16 at 16:19

answered Feb 03 '16 at 15:59

Chris Pickford

8,642
5
42
73

You misunderstand my intent. The first solution is good enough for me if it comes to the looks, but I cannot use it within
tag. I am guessing I need something with spans or other inline elements only. http://stackoverflow.com/questions/8397852/why-p-tag-cant-contain-div-tag-inside-it
– Danio Feb 03 '16 at 16:05
Check the updated fiddle. I've wrapped the text in a `
` and replaced the `
`s with ``s.
– Chris Pickford Feb 03 '16 at 16:12
Now it's OK. I upvoted your solution but marked Hatchet's as he was first. – Danio Feb 03 '16 at 16:23

score 2 · Accepted Answer · answered Feb 03 '16 at 16:06

You're on the right track with setting display: inline-block; on the span.chinese-word. If you remove the line break (<br>), and add display: block; to span.chinese-word span, then the text is centered again:

/* Your example */
span.chinese-word-previous {
    display: inline-block;
}

span.chinese-word-previous span {
    text-align: center;
}

/* Fixed */
span.chinese-word {
    display: inline-block;
}

span.chinese-word span {
    display: block;
    text-align: center;
}

Your example:
<p>This is a Chinese word <span class="chinese-word-previous"><span>wǒ</span><br><span>我</span></span> in an inline div</p>
<br>
<br>
Fixed:
<p>This is a Chinese word <span class="chinese-word"><span>wǒ</span><span>我</span></span> in an inline div</p>

Inline div broken when in p element

2 Answers2