-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>

Guys, I have this and I want to align the text with the box horizontally, how can I do that?

JCollerton
  • 3,227
  • 2
  • 20
  • 25
off off
  • 1

2 Answers2

1

<!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>
JCollerton
  • 3,227
  • 2
  • 20
  • 25
0

If you want to align the "Floating Box" text inside that box.

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

If you want to align the whole box horizontally relative to the body of the page.

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

Or you could do both as per the following snippet.

<!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>
Juan Ferreras
  • 2,801
  • 2
  • 13
  • 16
  • i want to align the outside text (h2) with thw whole box horizontally – off off Aug 21 '16 at 12:05
  • I'm sorry, I'm confused. Could you provide a small illustration of what you're after? You want both items to be on the same line and aligned horizontally? – Juan Ferreras Aug 21 '16 at 12:10