Блог

Главная - Вопросы по программированию - Как я могу центрировать свой текст с помощью Divs

Как я могу центрировать свой текст с помощью Divs

#html #css

#HTML #css

Вопрос:

У меня был этот код, и он работал хорошо. Информация о нижнем колонтитуле была в нижней части моего экрана посередине:

 div#footercenter p { font-size: 0.9em; }

<div id="footercenter">
  <p>amp;#169; XXXX </p>
</div>

Я хотел изменить его на это:

 div#footercenter {}
div#footer-message { font-size: 0.9em; color: #EEEEEE;  display: inline;}
div#footer-copyright { font-size: 0.9em; color: #EEEEEE; display: inline; }

<div id="footercenter">
  <div id="footer-copyright">xxx</div>|
  <div id="footer-message">yyy</div>
</div>

Теперь мой текст находится слева, а не по центру. У кого-нибудь есть идеи, как я могу вернуть его в центр?

Дэйв

Комментарии:

1. слишком много людей работают слишком быстро, прежде чем я наберу ответ .. 🙂

Ответ №1:

Вы имеете в виду вот так? :http://jsfiddle.net/jomanlk/DHA9A

Вам просто нужно добавить text-align в center 

 div#footercenter {text-align: center}

Ответ №2:

Должно быть так просто, как это:

 #footercenter {
    text-align:center;
}

Но вам также может потребоваться сделать это, если вам мешают другие стили:

 #footercenter div {
    float:none;
    display:inline; /* or inline-block */
}

Ответ №3:

<div> — это блочный элемент, который следует использовать для определения коллекций элементов, а не явно для текстового содержимого. В вашей разметке нет ничего плохого, но вы настроили свои divs так, чтобы они отображались как display: inline, что означает, что они занимают только ширину своего содержимого. По умолчанию divs также будут сгруппированы слева.

Лучшим подходом было бы поместить текст в пределах 2 элементов span, а затем просто установить для свойства text-align родительского div значение center.

Смотрите следующее;

 div#footercenter { font-size: 0.9em; color: #EEEEEE; text-align:center; }

<div id="footercenter">
  <span>xxx</span>|
  <span>yyy</span>
</div>

Ответ №4:

Попробуйте

 div#footercenter {
  text-align:center;
}

<div id="footercenter">
  <span id="footer-copyright">xxx</span>|
  <span id="footer-message">yyy</span>
</div>

Ответ №5:

Перепишите свой класс footercenter как 

 div#footercenter {text-align:center;}

Ответ №6:

Установите ширину для div, к которому вы хотите применить свойство text-align, а затем назначьте text-align : center.