Текстовый центр не работает

Проблема, которая у меня есть с моим кодом, заключается в том, что <p>Welcome to my Profile</p> не будет центрировать. Я пробовал использовать класс Bootstrap text-center, но он не работает должным образом. Я также пробовал несколько вещей, например, используя text-align: center; в CSS и даже используя width: 100%; как для заголовка, так и для div. Есть ли какие-либо решения? Заранее спасибо.Текстовый центр не работает

HTML:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Jane's Personal Profile</title> 

    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet"> 
    <link href="styles.css" rel="stylesheet" type="text/css"> 

    </head> 
    <body> 
    <header> 
     <h1>Jane Doe</h1> 
     <ul> 
      <li><a href="#">Social Media</a></li> 
      <li><a href="#">Portfolio</a></li> 
     </ul> 
    </header> 
    <div class="row"> 
     <div class="span8 offset2 text-center"> 
      <p>Welcome to my Profile</p> 
     </div> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    </body> 
</html>

CSS:

header { 
    height: 75px; 
    padding-left: 10px; 
    box-shadow: 5px 5px 10px grey; 
    width: 100%; 
} 

header > h1 { 
float: left; 
} 

ul { 
    display: table-row; 
    float: right; 
    list-style: none; 
} 

ul > li { 
    display: table-cell; 
    vertical-align: middle; 
    height: 70px; 
    padding: 10px; 
    padding-right: 20px; 
    font-size: 16px; 
} 

h1 { 
    font-family: 'Abril Fatface', cursive; 
}

источник

2016-08-29 FireKiN

Не могли бы вы, пожалуйста, включают в себя сценарий или живой пример, который воспроизводит проблему? – Li357

Появляется, чтобы работать нормально. https://jsfiddle.net/ouroborus/xwp4fp3g/ – Ouroborus

Вы, кажется, используете Bootstrap. Если да, добавьте этот тег в свой вопрос. Вы получаете какие-либо ошибки в консоли? – j08691

Похоже, вы используете "текст-центр" как класс. Если вы не определите свой CSS для распознавания класса, для CSS нечего делать.

Попробуйте добавить это к вашему CSS

.text-center { 
    text-align: center; 
}

Вы всегда должны обеспечить jsFiddle для таких проблем, как это, кстати;)

Если Bootstrap имеет класс настройки элемента абзаца выровнять влево, вы можете также необходимо изменить абзац на div. Кроме того, можно добавить класс к абзацу, такие как «центр-я» и добавить CSS

p.center-me { 
    text-align: center; 
}

Bootstrap добавляет гигантскую кучу CSS. Убедитесь, что когда вы используете Bootstrap, проверьте, есть ли стили CSS, которые влияют на то, что вы хотите выполнить. Большинство браузеров содержат окно разработчика, в котором вы можете увидеть, какие стили применяются к любому окну. В Chrome вы можете щелкнуть правой кнопкой мыши по любому элементу и выбрать «Inspect», чтобы вытащить это окно и увидеть как HTML, так и стили, применяемые из любого источника CSS.

источник

2016-08-29 21:16:26 Deborah

'text-center' - это класс из Bootstrap. Он применяет 'text-align: center;' – Li357

, вы не указали бутстрап в своем вопросе. Кроме того, если вы отмечаете людей, потому что их ответы не сработали для вас, хотя вы не предоставили полную информацию или jsFiddle для тестирования, вы не получите хороших ответов надолго. – Deborah

Я не оригинальный плакат; и код использует ссылку на Bootstrap CSS. – Li357

Версия бутстрапа, используемая этой веб-страницей, является более новой версией. Эта версия прекратила использование Span's и Offsets, поэтому, когда они спарены рядом с ними, класс текстового центра сломался. Эта более новая версия использует классы, похожие на col-md-x и col-md-offset-x.

Вы можете исправить свой код, просто изменив

<div class="span8 offset2 text-center">

к:

<div class="col-md-8 col-md-offset-2 text-center>

Вы можете прочитать больше о столбцах бутстраповских here

источник

2016-08-30 18:11:16 FireKiN

Текстовый центр не работает

ответ

Смежные вопросы