小説表紙での中央寄せ

初めまして、中央寄席がうまくできないのでどなたか解明していただけると嬉しいです。

【CSSスマホ】
body{
margin:20px 15px 10px 20px;
padding:0;
background-color: #ffffff;
color: #111111;
word-break:break-all;
letter-spacing:1px;
line-height:170%;
font-size:90%;
font-family: ヒラギノ角ゴシック,Georgia; }

a{ text-decoration:none;}
a:link {color:#708090;}
a:visited {color:#708090;}
a:active {color:#88bbee;}
a:hover {
color:#ffbbbb;
background-color:#ffffff;
border-bottom:dashed #a0a0a0 1px; }

.t1{
text-align: center;}
.t2 {
font-family:'Poiret One', cursive ; }
【以上、PCも同様】

【小説　表紙画面デザイン】
<p class="t1">##IMAGE_DATA_15##
<a href="#dream_url#"><span style="color:#ff86ae">文字</span></a>
#list#
171031〜
<a href="/ID/"><span style="color:#ff86ae">home</span></a></p>
【以上】

画像と文字リンクまでは中央寄せになるのですが、#list#〜はすべて左詰めになってしまいます。
HEAD編集ページは一切触っておりません。
よろしくお願いいたします。

>>0
スタイリングに<p>タグを使っているのが問題ですね。
*---↓表紙画面デザインの p を全て div に書き換え

<div class="t1">##IMAGE_DATA_15##
<a href="#dream_url#"><span style="color:#ff86ae">文字</span></a>
#list#
171031〜
<a href="/ID/"><span style="color:#ff86ae">home</span></a></div>

*---※CSSはそのままで大丈夫です

スタイリング目的の p は全て div に書き換えることをお勧めしておきます。
一応蛇足ですが理屈をば…他のところにも使っているかもしれないので……使っていなければ読み飛ばしてください。

>なぜ#list#以降が中央寄せにならない？
→<p>タグの中には“ブロック要素”を入れ子に出来ないのに、#list#でブロック要素を挿入してしまっているから。

listのテキストリンクを『縦積み』に設定すると、
*　　<div><a>リンク１</a></div>
*　　<div><a>リンク２</a></div>　…
という感じにテキストリンクを<div>によって“ブロック要素”にし、縦に積むのがALICE+さんの仕様です。

そしてHTMLの仕様では、<p>〜〜〜</p> の中に例えば
*　　<p>
*　　　<div>〜〜〜</div>
*　　</p>
と<div>を入れ子にしようとすると、<div>の直前に　</p>（閉じタグ）が自動挿入されます。つまり<div>の前でこの<p>が終了してしまうということです。
#とにかく　<p>〜〜</p> の中に <div> は使えない！という認識でOKです。

そういうわけで今回は、#list#によって挿入された<div>の直前で、自動的に<p class="t1">の影響範囲が終了。
list以降は<p class="t1">のスタイルが反映されませんでした。

<p>は“段落”を表すタグなので、ページの見栄えなどのスタイリングに用いるならば<div>の使用を強くお勧めします。というか、このような縛りがあるので<p>でデザインを行うのはやめた方が楽……なのですがテンプレサイトさんでもたまに見かけるんですよね…