выравнивания по горизонтали с помощью CSS

-2

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
.floating-box { 
 
    display: inline-block; 
 
    width: 150px; 
 
    height: 75px; 
 
    margin: 10px; 
 
    border: 3px solid #73AD21; 
 
} 
 

 
h2 { 
 
    text-align: center; 
 
} 
 

 

 
</style> 
 
</head> 
 
<body> 
 

 
<div class="floating-box">Floating box</div> 
 
<h2 >Floating box</h2> 
 

 

 
</body> 
 
</html>

Ребят, у меня есть это, и я хочу, чтобы выровнять текст с коробкой по горизонтали, как я могу это сделать?

источник

2016-08-21 off off

Если вы хотите центр выравнивания с плавающей ящик затем использовать ширина: 150px; margin: 0 auto; –

Пожалуйста, используйте поиск в следующий раз, этот вопрос задавался много раз. – jPlatte

Если вы хотите выровнять текст «Плавающая коробка» внутри этого окна.

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

Если вы хотите выровнять всю коробку по горизонтали относительно тела страницы.

.floating-box{ 
    display: block; 
    margin: 10px auto; 
}

Или вы можете сделать оба в соответствии со следующим фрагментом.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
.floating-box { 
 
    display: block; 
 
    width: 150px; 
 
    height: 75px; 
 
    margin: 10px auto; 
 
    border: 3px solid #73AD21; 
 
    text-align: center; 
 
} 
 

 
h2 { 
 
    text-align: center; 
 
} 
 

 

 
</style> 
 
</head> 
 
<body> 
 

 
<div class="floating-box">Floating box</div> 
 
<h2 >Floating box</h2> 
 

 

 
</body> 
 
</html>

источник

2016-08-21 12:04:24

Я хочу выровнять наружный текст (h2) с полной коробкой в горизонтальной плоскости –

Прошу прощения, я смущен. Не могли бы вы представить небольшую иллюстрацию того, что вам нужно? Вы хотите, чтобы оба элемента были на одной линии и выровнены по горизонтали? –

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
.floating-box{ 
 
    display: inline-block; 
 
    height: 75px; 
 
    margin: 10px; 
 
} 
 
.floating-box-width-border { 
 
    width: 150px; 
 
    border: 3px solid #73AD21; 
 
} 
 

 
h2 { 
 
    text-align: center; 
 
} 
 

 

 
</style> 
 
</head> 
 
<body> 
 

 
<div class="floating-box floating-box-width-border">Floating box</div> 
 
<div class="floating-box"><h2>Floating box</h2></div> 
 

 

 
</body> 
 
</html>

источник

2016-08-21 12:08:13 JCollerton

выравнивания по горизонтали с помощью CSS

ответ

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