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

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

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

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

CSS

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

Q&A

解決済

3回答

1213閲覧

50%を使わずに文字を中央寄せにしたい

kama_111

総合スコア19

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/06/06 15:24

前提・実現したいこと

スライドショーの上に文字を中央寄せで表示させたいのですが
left: 50%;
top: 50%;
を使うと改行が多く読みにくくなってしまうので
これ以外の方法があったら教えていただきたいです。

該当のソースコード

html

1<div id="demo-1" data-zs-src='["images/slide01.jpg", "images/slide02.jpg", "images/slide03.jpg", "images/slide04.jpg", "images/slide05.jpg"]' data-zs-speed="8000" data-zs-switchSpeed="800" data-zs-interval="4500"> 2 3 <span>ああああああああああああ<br>ああああああああああああああああああああああああああああああ</span></div>

css

1#demo-1{ 2 overflow: hidden; 3 width: 100%; 4 min-height: 450px; 5 background-color: #FFF; 6} 7 8#demo-1 span { 9 font-size: 1.3em; 10 font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif; 11 font-style: italic; 12 color: #FFF; 13 position: absolute; 14 margin: auto; 15 z-index: 1; 16 left: 50%; 17 top: 50%; 18 transform: translate(-50%, -50%); 19}

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

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

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

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

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

yoshinavi

2019/06/07 03:10

>改行が多く読みにくくなってしまうのでこれ以外の方法があったら教えていただきたいです。 → どういう事でしょうか? どのような設定しても、全てを強制的に1行にしない限り、文字数が多くなれば改行は普通の事ではないのでしょうか?
guest

回答3

0

「上下左右中央寄せ css」で検索すると記事が見つかりますので、そちらを参考にされてはいかがでしょうか?

CSSで要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ
CSSで上下・左右に中央寄せする方法、全部まとめ | WWWクリエイターズ

投稿2019/06/06 15:45

YukiYamashina

総合スコア1011

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

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

0

ベストアンサー

CSS

1#demo-1{ 2position: absolute; 3height:; 4width:; 5} 6 7span { 8display: block; 9position: relative; 10margin: auto; 11}

heightとwidthはスライドショーの高さと幅です。

投稿2019/06/06 23:43

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

選択肢としては、下記のような方法もあります。

html

1<div style="text-align:center">文字文字文字文字</div>

他の方法が書いてある良さそうな記事も見つけたので、参考にしてみてください!
https://saruwakakun.com/html-css/basic/centering

投稿2019/06/06 15:30

編集2019/06/07 00:30
fumito_94

総合スコア679

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

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

kama_111

2019/06/06 15:44

回答ありがとうございます。 この場合、縦の中央寄せはどうしたらいいんでしょうか(;_;)?
x_x

2019/06/07 00:28

さすがに center 要素は古すぎるのでは? 質問内容のコードは HTML5 を指しています。
fumito_94

2019/06/07 00:31

おっしゃる通りですね。 ご指摘ありがとうございます。 誤解を避けるために、内容修正させていただきました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問