0

これは私を夢中にさせました-コード全体で機能しない部分的な答えしか見つけることができません. 「いいねボタン」（外部サイトからの一部）と画像（「いいねボタン」が利用できない場所<script>として設定した画像）のインラインリストを中央に配置しようとしています。<a>

要件は次のとおりです。 1. すべてを親 div の上端に揃える必要があります。これが、ul、li、display:table、display:table-cell を使用して上に揃える理由です (インラインだけでなく、-ブロック) 2. すべてが同じ水平線上にある必要があるため、フローティングにする必要があります (インラインブロックがない場合) 3. すべてを中央に配置する必要があります (これは私が達成できないビットです!)

フォーラムを使うのはこれが初めてです。私はウェブ デザイナーではないので、お手柔らかにお願いします。関連性があり、役立つと思われるコードを添付しました。

#contact {
  position: relative;
  top: 1em;
  margin-left: 0;
  width: 100%;
  display: inline-block;
}
#contactinfo {
  margin-right: 0;
  color: #00CCFF;
  text-decoration: none;
  text-align: center;
  width: 100%;
  padding-bottom: 1em;
}
#share {
  position: relative;
  text-align: center;
  min-height: 1em;
  display: inline;
  vertical-align: top;
}
ul.button {
  display: table;
  min-height: 2em;
  list-style: none;
  list-style-position: inside;
  padding-left: 0.5em;
  margin-left: 0em;
  text-align: center;
  float: right;
}
ul.button li {
  display: table-row;
  vertical-align: top;
  text-align: center;
  height: 2em;
  padding: 0.5em;
}
img.sharebutton {
  max-width: 50px;
  max-height: 35px;
  padding-bottom: 1em;
}
<div id="contact">
  <div id="contactinfo">
    <h2>
email <a href="mailto:info@lysamorrison.com"> info@lysamorrison.com</a><br>
call 0796 99 777 68
</h2>
  </div>
  <div id="share">
    <div class="sharebuttons">
      <ul class="button">
        <li>
          <a href="http://www.eventbrite.com/o/lma-training-amp-consultancy-8057832740" target="_blank">
            <img src="eventbrite.png" class="sharebutton" />
          </a>
        </li>
      </ul>
    </div>
    <div class="sharebuttons">
      <ul class="button">
        <li>
          <a href="http://www.meetup.com/LMA-Personal-Professional-Development-Whitley-Bay-Meetup/#upcoming" target="_blank">
            <img src="meetup.png" class="sharebutton" />
          </a>
        </li>
      </ul>
    </div>
    <div class="sharebuttons">
      <ul class="button">
        <li>
          <script src="//platform.linkedin.com/in.js" type="text/javascript">
            lang: en_US
          </script>
          <script type="IN/FollowCompany" data-id="1586406"></script>
        </li>
      </ul>
    </div>
    <div class="sharebuttons">
      <ul class="button">
        <li><a href="https://twitter.com/LMAtrainconsult" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @LMAtrainconsult</a> 
          <script>
            ! function(d, s, id) {
              var js, fjs = d.getElementsByTagName(s)[0],
                p = /^http:/.test(d.location) ? 'http' : 'https';
              if (!d.getElementById(id)) {
                js = d.createElement(s);
                js.id = id;
                js.src = p + '://platform.twitter.com/widgets.js';
                fjs.parentNode.insertBefore(js, fjs);
              }
            }(document, 'script', 'twitter-wjs');
          </script>
        </li>
      </ul>
    </div>
    <div class="sharebuttons">
      <ul class="button">
        <li>
          <div class="fb-follow" data-href="https://www.facebook.com/lmatrainingandconsultancy" data-height="35" data-layout="button" data-show-faces="true"></div>
        </li>
      </ul>
    </div>
  </div>
  <!--End of share div-->
</div>

4

1 に答える 1

0

Flexboxがここでのソリューションです。3 つの特定のプロパティを使用してニーズに対応します。

  1. に設定 align-items するとflex-start、子は親の上に垂直に揃えられます。
  2. (デフォルト値) に設定 flex-wrap すると、子が 1 行に収まるようになります。nowrap
  3. 子を親内で水平方向justify-content に中央揃えする設定 center

簡単な例を次に示します。

*{box-sizing:border-box;margin:0;padding:0;vertical-align:middle;}
ul{
    background:black;
    align-items:flex-start;
    display:flex;
    flex-flow:row nowrap;
    justify-content:center;
    list-style:none;
    padding:2px;
}
li{
    margin:2px;
}
<ul>
    <li><a href="#"><img height="80" src="http://lorempixel.com/100/80/abstract/1/" width="100"></a></li>
    <li><a href="#"><img height="50" src="http://lorempixel.com/75/50/abstract/2/" width="75"></a></li>
    <li><a href="#"><img height="150" src="http://lorempixel.com/75/50/abstract/3/" width="200"></a></li>
</ul>

于 2015-11-27T16:19:40.817 に答える