Как центрировать текст внутри фонового изображения?

Этот фрагмент текста не центрируется правильно в div. Любая помощь будет замечательной! Вот рабочий стол CSS http://www.cssdesk.com/Vc8yF Как видите, текст больше слева, чем центра. Пожалуйста помоги! Спасибо.Как центрировать текст внутри фонового изображения?

Код сниппета:

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.header { 
 
    height: 50px; 
 
    background-color: #191919; 
 
} 
 
.navcontainer { 
 
    float: right; 
 
    margin-right: 100px; 
 
} 
 
.nav li { 
 
    display: inline; 
 
    font-family: arial; 
 
    color: white; 
 
    font-family: 'Titillium Web', sans-serif; 
 
    font-size: 14px; 
 
    font-weight: 300; 
 
    padding-left: 50px; 
 
} 
 
.billboard { 
 
    height: 620px; 
 
    width: 100%; 
 
    background-repeat: no-repeat; 
 
    background-size: 100%; 
 
    text-align: center; 
 
    background-position: center; 
 
    background-image: url('http://i300.photobucket.com/albums/nn18/ojijimanuel/Midtown_Manhattan_and_Times_Square_district_2015_zpsqimz80ub.jpg'); 
 
} 
 
h1 { 
 
    margin: 0; 
 
    text-align: center; 
 
    color: white; 
 
    font-family: arial; 
 
    font-size: 50px; 
 
}

<link href='https://fonts.googleapis.com/css?family=Titillium+Web:300' rel='stylesheet' type='text/css'> 
 
</head> 
 

 
<body> 
 

 
    <div class="header"> 
 
    <div class="navcontainer"> 
 
     <ul class="nav"> 
 
     <li>Home</li> 
 
     <li>About</li> 
 
     <li>Contact</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="billboard"> 
 
    <h1>SAMPLE TEXT</h1> 
 
    </div> 
 

 

 
</body> 
 

 
</html>

источник

2015-11-14 OJM

вы пытаетесь центрировать текст бота h вертикально и горизонтально? – wilsotobianco

Да, я пытаюсь это сделать. – OJM

Я предположил, что вы хотели, чтобы центрировать текст как по вертикали, так и по горизонтали:

Посмотреть result here

Я создал новый cssDesk с исправлениями. Подводя итог, я добавил position: relative в рекламный щит div, а затем добавил обертку div с position:absolute с небольшим трюком, чтобы центрировать текст внутри него.

Код сниппета:

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.header { 
 
    height: 50px; 
 
    background-color: #191919; 
 
} 
 
.navcontainer { 
 
    float: right; 
 
    margin-right: 100px; 
 
} 
 
.nav li { 
 
    display: inline; 
 
    font-family: arial; 
 
    color: white; 
 
    font-family: 'Titillium Web', sans-serif; 
 
    font-size: 14px; 
 
    font-weight: 300; 
 
    padding-left: 50px; 
 
} 
 
.billboard { 
 
    height: 620px; 
 
    width: 100%; 
 
    background-repeat: no-repeat; 
 
    background-size: 100%; 
 
    text-align: center; 
 
    background-position: center; 
 
    background-image: url('http://i300.photobucket.com/albums/nn18/ojijimanuel/Midtown_Manhattan_and_Times_Square_district_2015_zpsqimz80ub.jpg'); 
 
    position: relative; 
 
} 
 
.text-wrapper { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 400px; 
 
    height: 200px; 
 
    margin-left: -200px; 
 
    margin-top: -29px; 
 
} 
 
h1 { 
 
    margin: 0; 
 
    text-align: center; 
 
    color: white; 
 
    font-family: arial; 
 
    font-size: 50px; 
 
}

<link href='https://fonts.googleapis.com/css?family=Titillium+Web:300' rel='stylesheet' type='text/css'> 
 
</head> 
 

 
<body> 
 

 
    <div class="header"> 
 
    <div class="navcontainer"> 
 
     <ul class="nav"> 
 
     <li>Home</li> 
 
     <li>About</li> 
 
     <li>Contact</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="billboard"> 
 
    <div class="text-wrapper"> 
 
     <h1>SAMPLE TEXT</h1> 
 
    </div> 
 
    </div> 
 

 

 
</body> 
 

 
</html>

источник

2015-11-14 23:09:35 wilsotobianco

очень благодарен спасибо. – OJM

Мое удовольствие! Рад помочь – wilsotobianco

Это очень странное поведение, но как всегда с поплавками.

Это происходит из-за того, что ваш навигатор слишком велик для своего контейнера, поэтому поплавковый тип «распространяется» от него.

Вы можете добавить ясно: справа; на вас h1 или высота: 50px; на вашем .navcontainer, это будет сделать дело

источник

2015-11-14 23:09:26

Это был вызван поплавком навигации. Навигация выше, чем оболочка, заставляя элемент ниже (рекламный щит) сжиматься. Существуют различные способы, чтобы решить эту проблему, выбрать один из следующих вариантов:

Настройка полей на <ul> в навигации, поэтому он легко помещается в заголовок
Добавление переполнения: скрытый в заголовок
Добавление разъясняя: право/как на рекламный щит

источник

2015-11-14 23:27:44

Как центрировать текст внутри фонового изображения?

ответ

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