如何将文本列表居中，然后在 w3.css 列中对其进行调整答案

【问题标题】：How do I center a list of text and then justify it in a w3.css column如何将文本列表居中，然后在 w3.css 列中对其进行调整
【发布时间】：2019-07-25 03:03:51
【问题描述】：

我找不到一种既能将联系方式居中又能证明其合理性的方法，以便所有图标都排成一行。全屏更容易理解我的意思。

<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<script src="https://kit.fontawesome.com/1c4e37d442.js"></script>
<div class="w3-container w3-light-grey" style="padding:128px 16px" id="contact">
    <div class="w3-col l5 w3-center">
        <p><i class="fa fa-map-marker fa-fw w3-xxlarge w3-margin-right"></i>Antartica</p>
        <p><i class="fa fa-phone fa-fw w3-xxlarge w3-margin-right"></i> Phone: +00 151515</p>
        <p><i class="fa fa-envelope fa-fw w3-xxlarge w3-margin-right"> </i> Email: mail@mail.com</p>
    </div>
    <div class="w3-col l7">
      <form action="/" target="_blank">
      <p><input class="w3-input" type="text" placeholder="Name" required name="Name"></p>
      <p><input class="w3-input" type="text" placeholder="Email" required name="Email"></p>
      <p><input class="w3-input" type="text" placeholder="Phone" required name="Phone"></p>
      <p><input class="w3-input" type="text" placeholder="Subject" required name="Subject"></p>
      <p><textarea class="w3-input" type="text" placeholder="Message" required name="Message" style=""></textarea></p>
      <p>
        <button class="w3-button w3-blue w3-hover-white" type="submit">
          <i class="fa fa-paper-plane"></i> SEND MESSAGE
        </button>
      </p>
    </form>
    </div>
</div>

【问题讨论】：

CSS 在哪里？能否提供更完整的代码sn-p？
我正在使用css模板<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
所以你的意思是你想让它垂直居中在图标的中间？还有带有文本水平居中在页面中间的图标？如果是这样，您必须设置段落的 lineheight 并使用 vertical-align: middle 结合 text-align: center
我尝试过使用 text-align 和 vertical-align 但它们都有相同的效果，我在上面的代码 sn-p 中将文本居中。我想要实现的是所有图标都垂直排列。

标签： html css w3-css

【解决方案1】：

添加一个包装类并将 css 应用到它。希望这对你有用。

.wrapper {
    width: fit-content;
    margin: 0 auto;
	text-align: left;
}

<div class="wrapper">
    <p><i class="fa fa-map-marker fa-fw w3-xxlarge w3-margin-right"></i>Antartica</p>
    <p><i class="fa fa-phone fa-fw w3-xxlarge w3-margin-right"></i> Phone: +00 151515</p>
    <p><i class="fa fa-envelope fa-fw w3-xxlarge w3-margin-right"> </i> Email: mail@mail.com</p>
</div>

【讨论】：

谢谢它的工作，你介意解释一下哈哈。我通常不做任何与前端相关的事情
这可能是最好的方法。他添加了一个包装器，并为段落提供了一个灵活的宽度（因此它适合内容但不适合父级宽度）并添加了自动边距，因此它在父级中居中。因为他保持文本左对齐，所以图标是垂直对齐的。

【解决方案2】：

我想这就是你想要的，我不得不使用 flex，但现在它得到了广泛的支持：

.flex-c {
  display: flex;
  justify-content: center;
}
.flex-textcontainer {
  display: flex;
}
.flex-textcontainer span, .flex-textcontainer i {
  float: left;
  line-height: 36px;
  vertical-align: center;
}

<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<script src="https://kit.fontawesome.com/1c4e37d442.js"></script>
<div class="w3-container w3-light-grey" style="padding:128px 16px" id="contact">
    <div class="w3-col l5 flex-c"><div>
        <div class="flex-textcontainer"><i class="fa fa-map-marker fa-fw w3-xxlarge w3-margin-right"></i><span>Antartica</span></div>
        <div class="flex-textcontainer"><i class="fa fa-phone fa-fw w3-xxlarge w3-margin-right"></i> <span>Phone: +00 151515</span></div>
        <div class="flex-textcontainer"><i class="fa fa-envelope fa-fw w3-xxlarge w3-margin-right"> </i><span>Email: mail@mail.com</span></div></div>
    </div>
    <div class="w3-col l7">
      <form action="/" target="_blank">
      <p><input class="w3-input" type="text" placeholder="Name" required name="Name"></p>
      <p><input class="w3-input" type="text" placeholder="Email" required name="Email"></p>
      <p><input class="w3-input" type="text" placeholder="Phone" required name="Phone"></p>
      <p><input class="w3-input" type="text" placeholder="Subject" required name="Subject"></p>
      <p><textarea class="w3-input" type="text" placeholder="Message" required name="Message" style=""></textarea></p>
      <p>
        <button class="w3-button w3-blue w3-hover-white" type="submit">
          <i class="fa fa-paper-plane"></i> SEND MESSAGE
        </button>
      </p>
    </form>
    </div>
</div>

【讨论】：

【解决方案3】：

如果是我，我会在图标上使用float: left。然后在图标所在的元素上text-align: center。浮动只会影响图标而不是文本。在那之后，我想这只是根据你的喜好填充元素的问题。

我只是搞砸了一个带有图标的按钮，到目前为止它似乎工作正常。它可能无法完全解决问题，但可能会帮助您解决问题。

【讨论】：