对准水平使用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

如果你想中心对齐浮框，然后用宽度：150像素;保证金：0汽车; –

请在下次使用该搜索时，此问题已被询问过很多次。 – 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

回答

相关问题