3

I can't find a way to both center the contact details and justify it so the icons all line up. It is easier to see what i mean in fullscreen.

<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>
Zac
  • 215
  • 1
  • 2
  • 14
  • Where is the `CSS`? Can you provide a more complete code snippet? – Andy Hoffman Jul 25 '19 at 03:10
  • I'm using a css template `````` – Zac Jul 25 '19 at 03:11
  • So you mean you want it vertically centered in the middle of the icons? And also the icons with text horizontally centered in the middle of the page? If so you have to set the lineheight of the paragraph and use vertical-align: middle combined with text-align: center – NoNickAvailable Jul 25 '19 at 03:21
  • I've tried to use text-align and vertical-align but they all have the same effect, I have centered the text in the code snippet above. What I'm trying to achieve is the icons all line up vertically. – Zac Jul 25 '19 at 03:32

3 Answers3

1

Add a wrapper class and apply css to it. Hope this will gonna work for you.

.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>
Akshay Bawane
  • 146
  • 6
  • Thanks it worked, would you mind explaining how haha. I don't normally do anything front-end related – Zac Jul 25 '19 at 03:42
  • 1
    That's probably the best way doing it. He added a wrapper, and gave the paragraph a flexible width (so it fits content but not full parent width) and added margin auto, so its centers in the parent. Because he kept text-align left the icons are aligned vertically. – NoNickAvailable Jul 25 '19 at 04:05
1

I guess this is what you wanted, I had to use flex, but nowadays it's widely supported:

.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>
NoNickAvailable
  • 398
  • 1
  • 2
  • 12
0

If it were me, I'd use float: left on the icon. Then text-align: center on the element the icon is in. The float will only affect the icon and not the text. After that, I suppose it's just a matter of padding the element to your preference.

I just screwed around with a button that had an icon in it, and it seems to work fine so far. It may not completely fix the issue, but maybe it'll help you get there.

user11833525
  • 19
  • 3