質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

1486閲覧

正常に送信されました と トップページへ戻る の文字を中央に持ってきたい

abc30

総合スコア36

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/10/11 03:21

###前提・実現したいこと
正常に送信されました と トップページへ戻る の文字を中央に持ってきたい。
今、これらの文字は左に寄っている。
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;はちゃんと当たっていた。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

ベストアンサー

まず、col-lg-6を外してください。これは幅を50%にします。
また、text-centerを使えば個別にスタイルを用意しなくても中央寄せとなります。

HTML

1<div class="col-md-12 text-center">

投稿2017/10/11 04:26

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2017/10/11 04:28

書き忘れてましたが、おかしなところにheaderが出てきているので、それも直したほうがいいです。
guest

0

ブロック要素<div class="col-lg-6 col-md-12">
に対してプロパティtext-align: center;を設定するとセンタリングします。

css

1.col-lg-6 {text-align: center;}

もしくはback_topをブロック要素化するとback_topに設定されている「text-align: center;」が有効になります。

CSS

1.back_top {display:block}

「text-align: center;」は幅があるときにしか効果を発揮しません。<a>タグはインライン要素なので基本的に<a>タグで囲まれている文字列分の幅しかありません。「text-align: center;」プロパティはそのクラスが適応されている要素が確保している幅内で子要素をセンタリングしているので、今回の場合「トップへ戻る」の幅内でセンタリングという状況になります。

投稿2017/10/11 03:50

Terikichi

総合スコア18

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

単純に中央に持っていくだけなら、<div class="col-lg-6 col-md-12" style="text-align: center">
とすれば中央ぞろえになると思います。
あとは、offset使って真ん中に持ってくるとか…

投稿2017/10/11 03:48

motuo

総合スコア3027

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

手っ取り早くやりたいのでしたら

「.back_top」に「display:block;」を追記してみて下さい

投稿2017/10/11 03:39

yambejp

総合スコア114505

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問