CSS HTML 要素を中央揃え

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

css
1text-align: center;

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

new.html.erb

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

new.html.css

css
1.post-photo-upload{
2  height: calc(100% - 90%);
3  text-align: center;
4  margin-bottom: 20px;
5}

##追加コード

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

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

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

miyabi_pudding

2020/11/26 00:35

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

EleAco

2020/11/26 00:43

miyabi_takatsukさんコメントありがとうございます！ >HTMLはフレームワーク上の記載ではなく、実際に出力されたHTMLを書いてください。すみません私全くの初学者のため、内容が理解できないでいます… もう少し分かりやすくご説明いただいてもよろしいでしょうか（；＿；）

miyabi_pudding

2020/11/26 00:49 編集

おっと・・・。質問に初心者マークをつけれるので、質問修正をしましょう。タイトルの左にグレーアウトされた初心者マークがあるので、クリックすると有効になります。ブラウザでページを表示した際に、右クリック→ページのソースを表示で表示される、実HTMLのことです。 Ruby on Railsは、サーバーサイドフレームワークといって、ソースコードを、ブラウザが表示できるHTML形式に変換しています。 CSSは、HTMLに対してスタイルを当てるものなので、フレームワークのソースコードのままだと、回答しようがないのです。

EleAco

2020/11/26 00:55

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

miyabi_pudding

2020/11/26 01:02

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