Изо всех сил, чтобы центрировать мой шрифт Awesome Icons - PullRequest
Новая
       11

Изо всех сил, чтобы центрировать мой шрифт Awesome Icons

2 голосов
/ 05 ноября 2019

У меня проблемы с центрированием моих удивительных шрифтов иконок и кнопок. Я попытался сделать это через мою папку CSS, а также попробовал встроенный стиль. У меня есть оба в моем примере ниже. Может кто-нибудь сказать мне, почему он не центрируется и как лучше всего это исправить?

https://jsfiddle.net/silosc/0emaydqn/11/

Here is my HTML folder:
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="report-card-sm">
    <h2>
       We're sorry, this page is under construction.
    </h2>
    <p>We reccomend you try the following:</p>
    <ul class="fa-ul">
        <li><span class="fa-li"><i class="fa fa-calendar" style="align-content: center "></i></span>Checking your date range and readjust it</li>
        <li><span class="fa-li"><i class="fa fa-file-text" style="align-content: center "></i></span>Importing your file by clicking on the Upload Data button</li>

    </ul>
    <br />
    <br />
    <button class="btn-orange fa-orange">Go Back</button>
    <button class="btn-orange fa-orange">Upload Data</button>
</div>

Это моя папка CSS: 

h2 {
  text-align: center;
}

p {
  text-align: center;
}

ul i {

  justify-content: center;
}

button {
  justify-contern: center;
}

Ответы [ 5 ]

1 голос
/ 05 ноября 2019

Попробуйте использовать flexbox: 

ul{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

CSS: 

h2 {
  text-align: center;
}

p {
  text-align: center;
}

ul{
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
}

Используйте тег <center> в HTML 4.01: 

<center>
    <button class="btn-orange fa-orange">Go Back</button>
    <button class="btn-orange fa-orange">Upload Data</button>
</center>

В HTML5: вы будетенужно сгруппировать кнопки в div и использовать text-align: center

<div style="text-align: center">
    <button class="btn-orange fa-orange">Go Back</button>
    <button class="btn-orange fa-orange">Upload Data</button>
</div>

JSfiddle

1 голос
/ 05 ноября 2019

fa-li класс вызывает проблему. Потому что он содержит CSS быть абсолютным элементом. Вы можете просто удалить класс fa-li из тегов span. Чтобы сохранить пробел, вы можете добавить отступы или значения полей. Ниже приведен фрагмент кода.

Чтобы расположить кнопки по центру, я обернул кнопки div, который изначально был блочным элементом. Добавляя text-align:center CSS к элементу div (блок), он центрирует дочерние элементы (buttons). 

h2 {
  text-align: center;
}

p {
  text-align: center;
}

ul i {
  justify-content: center;
}

button {
  justify-contern: center;
}

ul li>span {
  margin-right: 5px;
}
.btn-wrapper{
text-align: center;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="report-card-sm">
  <h2>
    We're sorry, this page is under construction.
  </h2>
  <p>We reccomend you try the following:</p>
  <ul class="fa-ul">
    <li><span><i class="fa fa-calendar" style="align-content: center "></i></span>Checking your date range and readjust it</li>
    <li><span><i class="fa fa-file-text" style="align-content: center "></i></span>Importing your file by clicking on the Upload Data button</li>
  </ul>
  <br />
  <br />
  <div class="btn-wrapper">
    <button class="btn-orange fa-orange">Go Back</button>
  <button class="btn-orange fa-orange">Upload Data</button>
  </div>
</div>
1 голос
/ 05 ноября 2019

Просто удалите тег <span> из li и используйте font-awesome непосредственно в теге <i>. Я также добавил некоторые отступы к тегу <i> или значку fa , чтобы он не сворачивался с текстом <li>.

Для центрирования buttons просто добавьте тев div и присвоить этому свойству div text-align:center;

h2 {
  text-align: center;
}

p {
  text-align: center;
}

ul li .fa{
padding-right:5px;
}


.center-div{
text-align: center;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="report-card-sm">
    <h2>
       We're sorry, this page is under construction.
    </h2>
    <p>We reccomend you try the following:</p>
    <ul class="fa-ul">
        <li><i class="fa fa-calendar"></i>Checking your date range and readjust it</li>
        <li><i class="fa fa-file-text"></i>Importing your file by clicking on the Upload Data button</li>
        
    </ul>
    <br />
    <br />
    <div class="center-div">
    <button class="btn-orange fa-orange">Go Back</button>
    <button class="btn-orange fa-orange">Upload Data</button>
    </div>
</div>

Надеюсь, это поможет вам.

0 голосов
/ 05 ноября 2019

Извините, у меня нет времени, чтобы создать рабочее решение для вас, но вот мои мысли:

Я вижу, что у вас есть 3 блочных элемента, которые занимают весь экран (<div class="report-card-sm">, <ul class="fa-ul"> и <li> дважды)

Кроме того, justify-content: center; является частью использования display: flex;, пока вы не добавите display: flex;, это не будет иметь никакого эффекта.

Редактировать: Это может быть полезно для вас: Как горизонтально центрировать

0 голосов
/ 05 ноября 2019

Вы должны поместить text-align: center; в родительские элементы (создать один?).

И создать новый класс для <span class="fa-li">, чтобы сбросить position: absolute; и, возможно, установить margin-right, чтобы убрать значок итекст

...