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

您可以使用像bootstrap，foundation或skeleton这样的前端框架轻松完成！

它只是添加到你的html中的一些资源和一些clases，这个类有属性。您将能够在此行中创建行和列。

基础文档： http://foundation.zurb.com/sites/docs/

<div class="row">
     <div class="large-3 columns article">
      <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 class="large-3 columns article">
      <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 class="large-3 columns article">
      <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="large-3 columns article">
      <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>

class =“row”它会告诉我：我要在里面放一些列。

然后， class =“column”或 class =“columns”并不重要（它是相同的）。

之后，big-3表示宽度div。

如此;每行由12列组成，然后，您可以为每个快速div分配所需的列，但它们的总和不能超过12。

之后，如果您向此行添加任何ID，则会以一行为中心，并说：

#idYouWant{
text-align:center;
width: what you want;
}

希望我帮忙！如果没有......抱歉！

Answer 2

使用此CSS：

.bot-col {
  width: 1192px;
  position: relative
}

.bot-col > div {
  position: relative;
  margin: 20px auto;
}

第二个使用<div>规则直接将<{1}}块 .bot-col块放在<{em> margin: 20px auto内。 auto适用于左侧和右侧nd执行居中，20px可以更改为品味，并且是DIV上方和下方的边距。

要使这个居中方法有效，父元素（= .bot.col）必须有position: relative;（或绝对或固定，但在这种情况下不）

Answer 3

使用CSS flex模块，您可以按如下方式实现布局。

您的flex容器为.bot-col，因此首先需要display: flex，然后justify-content: center将四个子块置于容器中心。

最后，在.bot-col div上设置宽度值，这比将其分配给h2和p等单个元素更简单。

如果需要，您可以设置宽度和高度的值。

您可以在以下位置详细了解flex的众多选项：

http://www.w3.org/TR/css-flexbox-1/

注意：如果您希望子块/列元素在父块中均匀分布，您也可以尝试justify-content: space-between。

.bot-col {
  width: auto;
  height: auto;
  display: flex;
  justify-content: center;
  border: 1px dotted blue;
}
.bot-col div {
  width: 150px;
  margin: 10px;
  border: 1px dotted blue;
}
.bot-col p {
  text-align: center;
  font-size: 7pt;
}
.bot-col h2 {
  text-align: center;
  font-size: 14pt;
}

<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>
</div>

使用CSS flex将div中的四列文本居中

4 个答案: