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

Question

我找不到既能使联系人详细信息居中又能使所有图标对齐的方法。全屏更容易明白我的意思。

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

Answer 1

添加包装器 class 并对其应用 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>

Answer 2

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

我刚刚弄乱了一个带有图标的按钮，到目前为止它似乎工作正常。它可能无法完全解决问题，但也许可以帮助您解决问题。

Answer 3

我想这就是你想要的，我不得不使用 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>

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

How do I center a list of text and then justify it in a w3.css column

html

css

w3-css