html - 如何将文本列表居中，然后在 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

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