Два столбца должны быть отформатированы

Question

Я создаю нижний колонтитул, как показано ниже, но, кажется, не хорошо. Я хочу, чтобы "Телефон" был точно ниже "Электронная почта", и его содержание также должно начинаться с места.

Я хочу, чтобы мой текст был в центре. Я не против, если идентификатор или класс нужно предоставить или нужно немного изменить HTML.

как:

               Name Surname                      Email:      namesurname@gmail.com
      Address: City, country                     Telephone:  +1 223 233 111

Мой код

#footer {
    display: flex;
    justify-content: center;
    background-color: rgba(0,0,0,0.7);
}

#footer > div:first-child {
    border-right: 1px solid white;
}

#footer > div {
    padding: 20px 0;
    margin: 20px 0;
    flex: 1;
    text-align: center;
}

#footer span {
    font-size: 15px;
    padding: 10px 0;
    color: white;
}

<section id="footer">
            <div>
                <div>
                    <span>Fname Lname</span>
                </div>
                <div>
                    <span>Address:</span>
                    <span>City, Country</span>
                </div>
            </div>
            <div>
                <div>
                    <span>Email:</span>
                    <span>namesurname@gmail.com</span>
                </div>
                <div>
                    <span>Telephone:</span>
                    <span>+1 525 111 222</span>
                </div>
            </div>
        </section>

Любая помощь будет принята с благодарностью.

Answer 1

Одна из возможностей без изменения HTML - применить display: inline-block; и text-align: left; ко всем диапазонам, а затем применить разную ширину (в процентах или пикселях) к первому и последнему дочерним диапазонам во втором DIV, как показано ниже:

(выравнивание текста влияет только на промежутки с определенной шириной.)

#footer {
  display: flex;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
}

#footer>div:first-child {
  border-right: 1px solid white;
}

#footer>div {
  padding: 20px 0;
  margin: 20px 0;
  flex: 1;
  text-align: center;
}

#footer span {
  font-size: 15px;
  padding: 10px 0;
  color: white;
  display: inline-block;
  text-align: left;
}

#footer>div:last-child>div>span:first-child {
  width: 20%;
}

#footer>div:last-child>div>span:last-child {
  width: 50%;
}

<section id="footer">
  <div>
    <div>
      <span>Fname Lname</span>
    </div>
    <div>
      <span>Address:</span>
      <span>City, Country</span>
    </div>
  </div>
  <div>
    <div>
      <span>Email:</span>
      <span>namesurname@gmail.com</span>
    </div>
    <div>
      <span>Telephone:</span>
      <span>+1 525 111 222</span>
    </div>
  </div>
</section>

Answer 2

Похоже на макет таблицы:

#footer {
  display: flex;
  justify-content: center;
  /* To replace the border */
  background:linear-gradient(#fff,#fff) center/1px 60% no-repeat;
  background-color: rgba(0, 0, 0, 0.7);
  padding:20px 0;
}

#footer>div {
  display: table;
  margin:40px auto; /* Center  */
}

#footer>div>div {
  display: table-row;
}

#footer>div>div>span {
  display: table-cell;
  padding:0 10px;
  font-size: 15px;
  color: white;
}

/*Add empty cell for the Fnam Lname*/
#footer>div:first-child > div:first-child:before {
  content:"";
  display:table-cell;
}
/**/

<section id="footer">
  <div>
    <div>
      <span>Fname Lname</span>
    </div>
    <div>
      <span>Address:</span>
      <span>City, Country</span>
    </div>
  </div>
  <div>
    <div>
      <span>Email:</span>
      <span>namesurname@gmail.com</span>
    </div>
    <div>
      <span>Telephone:</span>
      <span>+1 525 111 222</span>
    </div>
  </div>
</section>

Answer 3

Не изменяя свой HTML, вы можете просто установить text-align: left на содержащем <div>.Так как у вас нет классов или идентификаторов, это легче всего сделать с помощью #footer > div:nth-of-type(2) > div.

. Обратите внимание, что это подтолкнет ваш текст к центральному разделителю, так что вы, вероятно, также захотите немного margin-left или padding-left.

Это можно увидеть в следующем:

#footer {
    display: flex;
    justify-content: center;
    background-color: rgba(0,0,0,0.7);
}

#footer > div:first-child {
    border-right: 1px solid white;
}

#footer > div {
    padding: 20px 0;
    margin: 20px 0;
    flex: 1;
    text-align: center;
}

#footer span {
    font-size: 15px;
    padding: 10px 0;
    color: white;
}

#footer > div:nth-of-type(2) > div {
  text-align: left;
  margin-left: 10px;
}

<section id="footer">
  <div>
    <div>
      <span>Fname Lname</span>
    </div>
    <div>
      <span>Address:</span>
      <span>City, Country</span>
    </div>
  </div>
  <div>
    <div>
      <span>Email:</span>
      <span>namesurname@gmail.com</span>
    </div>
    <div>
      <span>Telephone:</span>
      <span>+1 525 111 222</span>
    </div>
  </div>
</section>