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

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

ただいまの
回答率

89.85%

クラス名symbolのついている、SNSボタン三つをインライン要素にして並べたのですが、text-align: center;をつけても左揃えになります。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 681
退会済みユーザー

退会済みユーザー

クラス名symbolのついている、SNSボタン三つをインライン要素にして並べたのですが、text-align: center;をつけても左揃えになります。

インライン要素はtext-align: center;で中央ぞろえになるはずですが複数だとならないのでしょうか?
divかspanで三つを囲むしかないでしょうか?

<!-- drawermenu -->
            <nav>
                <div id="nav__drawermenu-wrap">
                <ul>
                    <li>
                        <a class='symbol animation-hover action-hover' href="https://plus.google.com/share?url=" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title='&#xe039;'></a>

                                   <a class='symbol animation-hover action-hover' href="http://www.facebook.com/share.php?u=" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title='&#xe027;'></a>

                                   <a class='symbol animation-hover action-hover' href="http:/></a>

                    </li>
                    <li><a class="link-block" href="#room">教室</a></li>
                    <li><a  class="link-block" href="#accsess">アクセス</a></li>
                    <li><a  class="link-block" href="#contactUs">お問い合わせ</a></li>
                </ul>
                  </div>
              </nav>
              <!-- /drawermenu -->
/* 左から出てくるdrawer-menu */
#nav__drawermenu-wrap ul {
    z-index: 300;
    width: 100%;
    position: fixed;
    top: 0;
    padding-top: 2.8rem;
/*    background-color: rgba(255,100,50,.2);*/
    cursor: pointer;
    margin-left: -100%;
    transition-propety:all;
    transition-duration:1s;
}

#nav__drawermenu-wrap li {
  margin-bottom: 0.2rem;
  background: rgba( 229, 228, 255, 0.3 ); 
  /*background: -o-linear-gradient(left, rgba(52, 152, 219,0.5) #066, rgb(41, 128, 185,0.5) #066);
  background: linear-gradient(to right, rgba(52, 152, 219,0.5) #066, rgb(41, 128, 185,0.5) #066);*/
}

#nav__drawermenu-wrap li a {
    height: 6rem;
    line-height: 6rem;
    margin: 0 auto;
    color: #fff;
    font-size: 2rem;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0,0,0,.9);
}

.link-block {
    display: block;
    text-align: center;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

インラインようそに  text-align じゃなくて、ul に text-align です。

ul に text-align:center で、インライン要素がセンタリングする、ですね。
li はインラインじゃないので、display: inline-block します。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/02/04 14:36

    すいません。親要素につけるんでしたね。
    ただliにつけるという形ではいけないのでしょうか?



    li はインラインじゃないので、display: inline-block します。

    li はインラインでもブロックでもない特殊な要素なのですか?

    キャンセル

  • 2016/02/04 15:31

    何も付けないと縦に並ぶのでブロック要素なんじゃないですか。

    li に付けるじゃダメなのか?

    どこをセンタリングしたいのか、ですね。ul の css width が 100%なので、 li をセンタリングしたいのだと解釈したんですがハズレでしたか。

    キャンセル

  • 2016/02/06 11:28

    おかげさまで、親要素につけることで、解決しました。

    liはブロック要素なのですね。

    キャンセル

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

  • ただいまの回答率 89.85%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • CSSに関する質問
  • クラス名symbolのついている、SNSボタン三つをインライン要素にして並べたのですが、text-align: center;をつけても左揃えになります。