CSS HTML 要素を中央揃え

Question

「ファイルを選択 選択されていません」
を中央に並べたいのですが
うまくできず困っております。。
「クリックして写真をアップロード」は↓

text-align: center;

で中央揃えにできたのですが。。。
わかる方教えてください！
よろしくお願い致します（；＿；）

new.html.erb

<div class="post-photo-upload">
  <p>
  クリックして写真をアップロード
  </p>
  <%= f.file_field :image, class: 'photo-image' %>
</div

new.html.css

.post-photo-upload{
  height: calc(100% - 90%);
  text-align: center;
  margin-bottom: 20px;
}

##追加コード

 <div class="post-photo-upload">
   <p>
     クリックして写真をアップロード
   </p>
   <input class="photo-image" type="file" name="photo[image]" id="photo_image" />
</div>

plasticgrammerさんからのアドバイス
border-style: solid;を追加

確かになっていました！！
選択されていませんの右に余分な部分が存在しますね。。
デフォルトでこの様になっているのでしょうか？？
解決策をご存知の方いらっしゃいますでしょうか

Comments

[miyabi_pudding]

HTMLはフレームワーク上の記載ではなく、
実際に出力されたHTMLを書いてください。

[EleAco]

miyabi_takatsukさん
コメントありがとうございます！
>HTMLはフレームワーク上の記載ではなく、
実際に出力されたHTMLを書いてください。

すみません私全くの初学者のため、内容が理解できないでいます…
もう少し分かりやすくご説明いただいてもよろしいでしょうか（；＿；）

[miyabi_pudding]

おっと・・・。
質問に初心者マークをつけれるので、質問修正をしましょう。
タイトルの左にグレーアウトされた初心者マークがあるので、クリックすると有効になります。

ブラウザでページを表示した際に、
右クリック→ページのソースを表示
で表示される、実HTMLのことです。

Ruby on Railsは、サーバーサイドフレームワークといって、
ソースコードを、
ブラウザが表示できるHTML形式に変換しています。
CSSは、HTMLに対してスタイルを当てるものなので、
フレームワークのソースコードのままだと、回答しようがないのです。

[EleAco]

miyabi_takatsukさん
詳しい内容まで教えていただいてありがとうございます！
すみません
編集致しましたのでご回答よろしくお願い致します！

[miyabi_pudding]

こちらで検証してみましたが、普通に効きます。
おそらく、他のHTMLやCSSが干渉していると考えられるので、
外側のHTMLと、
他CSSも記載いただけないでしょうか？

[plasticgrammer]

実はすでに中央寄せになっているとかないでしょうか。
確認のため、file選択のinput要素に枠を設定してみてください。
具体的には、cssのクラスphoto-imageに、border-style: solid; を追加すればいけると思います。

[EleAco]

plasticgrammerさん
コメントありがとうございます！！

Answer 1

「選択されていません」が表示されている場所は、ファイルを選択したときにファイル名が表示される場所です。
幅はこのままで、気になるようでしたら細く目立たない枠を設定するほうが良いかと思います。