要素を左揃えの中央揃えにしたい

Question

###前提・実現したいこと
このようなものを作りたいです。

###試したこと
・サイト内ページA
・ページB
・ページC
をdivで囲って
margin: 0 auto;
をしてみたのですが、
width要素を指定していない (とり方がわからない) ため
うまく行かず、全て左側に寄ってしまいました。

Comments

[gin]

ひとまず試したhtmlとcssの提示をお願いします。

[kei344]

具体的にHTMLおよびCSSを質問文に追記いただいたほうが回答を得られやすいと思います。

Answer 1

わたくしなら以下のように対応すると思います。

<footer id="footer">
  <ul>
    <li>
      <h3>ページリンク</h3>
      <div>
        <ol>
          <li><a href="#">ページリンクA</a></li>
          <li><a href="#">ページリンクB</a></li>
          <li><a href="#">ページリンクC</a></li>
        </ol>
      </div>
    </li>
    <li>
      <h3>アクセス</h3>
      <div>
        <ol>
          <li><a href="#">アクセスA</a></li>
          <li><a href="#">アクセスB</a></li>
          <li><a href="#">アクセスC</a></li>
        </ol>
      </div>
    </li>
  </ul>
</footer>

#footer {
  width:100%;
}
#footer ul li {
  float:left;
  width:50%;
  text-align:center;
}
#footer ul li div {
  display:inline-block;/*追記*/
  margin:0 auto;
  width:auto;
}
#footer ul li h3 {ここ修正しましたdivが要りません}
#footer ul li div ol li {
  float:none;
  width:auto;
  text-align:left;
}

装飾関連は適切に追記を行ってください。
上記で文字数関係なく、いけるはずですがいかがでしょうか？

追記：ソース変更しておきました。
あと、h3部分が、リンクテキストよりも長い場合は、
そちらに揃ってしまうので、divの外に記述してください。

Comments

[aridai1221]

コード、ありがとうございます。
しかし、私の環境では
ページリンクA,B,Cが左側によってしまいました。

[LibertyBell3]

すみません。
#footer ul li div に、display:inline-block; を追記してみてください。

Answer 2

こんにちは。
このような形はいかがでしょうか？

この方法だと、ulタグの幅は固定にする必要がありますが、
emという単位を使うことによって、文字数での幅指定ができます。

<footer>
  <div>
    <h3>ページリンク</h3>
    <ul>
      <li><a href="javascript:void(0)">ページA</a></li>
      <li><a href="javascript:void(0)">ページBBBB</a></li>
      <li><a href="javascript:void(0)">ページC</a></li>
    </ul>
  </div>
  <div>
    <h3>アクセス</h3>
    <ul>
      <li><a href="javascript:void(0)">Twitter</a></li>
      <li><a href="javascript:void(0)">Github</a></li>
    </ul>
  </div>
</footer>

footer {
  display: flex;
  box-sizing: content-box;
}

footer > div {
  border: 1px solid #595959;
  height: 300px;
  width: 50%;
  border-right: 0;
  border-bottom: 0;
  text-align: center;
}

footer > div:first-child {
  border-left: 0;
}

footer > div > ul {
  width: 10em; /* ここを変えると、リストの位置が変わります */
  margin: 0 auto;
}

footer > div > ul > li {
  text-align: left;
}

サンプル

Answer 3

filexboxを利用して作りました。

<footer>
    <div style="display: flex; justify-content: space-around;">

        <div>
            <h3>ページリンク</h3>
            <ul>
                <li><a href="#">ページA</a></li>
                <li><a href="#">ページB</a></li>
                <li><a href="#">ページC</a></li>
            </ul>
        </div>

        <div>
            <h3>アクセス</h3>
            <ul>
                <li><a href="#">アクセスA</a></li>
                <li><a href="#">アクセスB</a></li>
                <li><a href="#">アクセスC</a></li>
            </ul>
        </div>

    </div>
</footer>

こんな感じのコードになりました。

皆様、回答ありがとうございました。