html - 使用 CSS flex 在 div 中居中放置四列文本

Question

我试图让这四列文本在 div bot-col 中居中，并且等距离分开。到目前为止，我发现的一切都不是答案。提前感谢您的帮助

像这样http://www.thehonours.co.uk (在两张图片的下方)

html:

<div class="bot-col">
     <div>
      <h2>
        Gift Vouchers
      </h2>
      <p>
        For The Honours - Edinburgh, or any of Martin's other
        great restaurants - Restaurant Martin Wishart and
        Restaurant at Loch Lomond. <a href=
        "gift-vouchers.html">—Purchase here</a>
      </p>
    </div>
    <div>
      <h2>
        Opening Hours
      </h2>
      <p>
        Tuesday - Saturday Lunch 12:00—14:30 Dinner 18:00—22:00
        Closed Sunday all day Closed Monday all day
      </p>
    </div>
    <div>
      <h2>
        Contact Details
      </h2>
      <p>
        <em>The Honours - Edinburgh</em> 58a North Castle
        Street Edinburgh EH2 3LU Telephone 0131 220 2513
        <em><a href=
        "mailto:info@thehonours.co.uk">info@thehonours.co.uk</a></em><br />

        <a href="contact.html">—Find out more</a>
      </p>
    </div>
    <div class="news_column">
      <h2>
        Newsletter
      </h2>
      <p>
        For all the latest news, updates and events at The
        Honours - Edinburgh, simply enter your details and you
        will receive our exclusive newsletter direct to you
        inbox <a class="newsletter" href="sign-up.html">—Sign
        up</a>
      </p>
        </div>

这是我尝试过的，但收效甚微。CSS:

.bot-col{
width: 1192;
height 185;
margin: auto;
display: flex;
text-align: center;
}

.bot-col p{ 
width: 110px;
height: auto;
display: block;
font-size: 7pt;
margin: auto
}
.bot-col h1{
width: 110px;
display: block;
font-size: 14pt;
margin: auto;
}

Answer 1

<div class="bot-col">
    <div style="display: flex;margin: 0 auto;">
        <div>
            <h2>Gift Vouchers</h2>
            <p>
              For The Honour - Edinburgh, or any of Martin's other...
              <a href="gift-vouchers.html">—Purchase here</a>
            </p>
        </div>
        ...
    </div>
</div>