Question

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

伙计们，我有这个，我希望水平对齐文本框，我该怎么做？

Answer 1

＆＃13;

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

＆＃13;

Answer 2

如果你想对齐＆＃34;浮动框＆＃34;该框内的文字。

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

如果要将整个框水平对齐相对于页面正文。

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

或者您可以按照以下代码段执行这两项操作。

＆＃13;

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

＆＃13;

使用css水平对齐

2 个答案: