css text-align about :

Question

나는 아래의 페이지와 같은 페이지를 작성하고, 똑같은 CSS 스타일 코드를 복사하지만, 텍스트 정렬은 무언가 일어난다. http://mp.weixin.qq.com/s?__biz=MjM5ODQwMjA4MA==&mid=2649293603&idx=1&sn=57f38200555dcba76d6358594416c089&scene=1&srcid=0922hwo0hW1YFpZ5km00qu8f#rd

빨간색 줄이있는 텍스트는 중앙이어야합니다. 나는이 코드를 작성하지 않았다. 내가 쓰는 html 파일의 소스 코드입니다. 여기에 텍스트의

스타일의 코드는 다음과 같습니다

<section style="box-sizing: border-box; background-color: rgb(255, 255, 255);"><section style=" box-sizing: border-box; "><section style=" margin-top: 10px; margin-bottom: 10px; box-sizing: border-box; "><section style="box-sizing: border-box; text-align: center;"><section style="display: inline-block;vertical-align: top;padding: 8px 5px 5px 3px;width: 50%;box-sizing: border-box;border-right: 1px solid #66CCC5;"><section style="box-sizing: border-box;"><section style="margin-top: 0.5em; margin-bottom: 0.5em; box-sizing: border-box;"><section style="box-sizing: border-box;width: 4em;height: 4em;display: inline-block;vertical-align: bottom;border-radius: 100%;background-image: url(&quot;http://mmbiz.qpic.cn/mmbiz/xpE6LLZTjLjZbC3icL0gxysDXhDQB9iaUPkFkZTfWxshdqfjuibeO84QQRovVcvYY4yhRLQPHusytjcicic7iav0GNvg/0?wx_fmt=jpeg&quot;);background-size: cover;background-position: 50% 50%;background-repeat: no-repeat;" class=""><br></section><p><span style="font-size: 14px;color: rgb(102, 204, 197);line-height: 1.6;">阿禅 Jason Ng</span></p></section></section></section><section style="display: inline-block;vertical-align: top;padding: 6px;width: 50%;box-sizing: border-box;"><section style="box-sizing: border-box; border: 1px solid rgb(102, 204, 197); padding: 8px 5px; width: 120px; color: rgb(102, 204, 197); border-radius: 2px; margin: auto; line-height: 20px; font-size: 14px;"><p>读完本文<br>大约需要</p><section style="font-size: 30px;color:#666;line-height: 38px;">6</section>分钟</section></section></section></section></section></section><

소스 코드 :보기 소스 : http://7rf31y.com1.z0.glb.clouddn.com/index.html 로컬 HTML 파일을 복사하여 붙여 넣을 수를 연 다음, 그것 크롬.

Answer 1

span에는 정렬 스타일 기본값이 없지만 p는 수행하므로 스팬은 왼쪽 정렬을 포함하여 p 스타일을 상속합니다. 우선이 스팬을 ap에 넣을 이유가 없으므로 P를 간단히 사용할 수는 있지만 관련이 없습니다. 다음과 같이 컨테이너를 클래스에 추가하고 paragraf를 사용하여 텍스트를 가운데에 맞춰야합니다 :

.foo, .foo > p{text-align:center;}

<div class="foo"> 
 
    <p class="foo2"> 
 
    <span> 
 
     lorem ipsum dolor sit amet 
 
    </span> 
 
    </p> 
 
</div>

그것은 자식 선언을 사용하지 않고 일을해야하지만 난 당신의 stylement을 잘 모릅니다으로 오류를 방지하는 것입니다 나는 당신이 할 수 . 그리고 제발, HTML 태그 스타일을하지 마십시오 .-

건배!