###前提・実現したいこと
正常に送信されました と トップページへ戻る の文字を中央に持ってきたい。
今、これらの文字は左に寄っている。
headerの上から100px離れたところで、
ブラウザの真ん中に文字を持っていきたい。
###発生している問題・エラーメッセージ
cssの読み込みは正常に行われている。
が、文字が左に寄っている。
###該当のソースコード
photo.htmlに
{% load staticfiles %} <html lang="ja"> <head> <meta charset="UTF-8"> <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"> <link rel="stylesheet" href="{% static 'accounts/photo.css' %}"> <link rel="stylesheet" href="{% static 'bootflat/css/bootflat.min.css' %}"> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <title>WEB SITE</title> </head> <header class="clearfix"> <h1 class="title">Health Diary-β</h1> </header> <body> <div class="col-lg-6 col-md-12"> <p class="success_message">正常に送信されました</p> <a class="back_top" href="accounts/detail">トップページへ戻る</a> </div> </body> </html>
と、photo.cssに
* { margin: 0; padding: 0; } header { height: 100px; align-items: center; display: flex; justify-content: space-between; } .title { color: blue; font-size: 70px; align-self: center; } .back_top{ font-size: 30px; text-align: center; } .success_message{ font-size: 30px; text-align: center; }
と書いた。
###試したこと
Googleのデベロッパーツールを使うと、 text-align: center;はちゃんと当たっていた。
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/11 04:28