Question

我正在开发一个项目，左上角应该有两个方框，但是在同一行上居中显示文本，如下所示：http://jsfiddle.net/charliedean/Gqq6w/23/。但我遇到了一个简单的CSS问题（我是新手）。 h1应该对齐居中，但是框应该在左上角，所以这里是代码：

.box {
margin: 5px;
background: #fff;
color: #000;
text-align: center;
padding: 20px;
height: 50px;
width: 50px;
line-height: 50px;
font-family:'Francois One', sans-serif;
float: left;
position:relative;
left:0;
top:0;

h1 {
font-family:'Francois One', sans-serif;
font-size:100px;
color:#fff;
float:center;

下面会有一个中心对齐的jpeg。有什么帮助吗？

Answer 1

Float属性总共有四个值：left，right，none和inherit。

不正确

h1 {
font-family:'Francois One', sans-serif;
font-size:100px;
color:#fff;
float:center;
}

试试这个：

h1 {
font-family:'Francois One', sans-serif;
font-size:100px;
color:#fff;
text-align:center;
}

Answer 2

将line-height: 116px;属性添加到CSS中的h1选择器。它会将它与你的“盒子”元素对齐。

（顺便说一句，你的HTML在语义上并不正确。你不能在A中使用DIV。删除DIV并将属性display:inline-block添加到A。）

Answer 3

正如GCyrillus所说：

由于内容不在页面的常规流程中，因此
float不会与居中一致。您可以使用文本对齐和显示。

这是一个将h1置于中心的简单解决方案：放置一个宽度与右侧两个方框相同的方框（让它浮动：向右）。

像：

<div class="box">HOME</div><div class="box">HOME</div><div style="float:right; width:200px;"></div><h1>some caption</h1>

Answer 4

像这样更改h1样式：

h1 {
    font-family:'Francois One', sans-serif;
    font-size:100px;
    color:#fff;
    clear:both;  /*  added  */
    text-align:center;  /*  instead float:center */
}

jsFiddle

<小时/> 更新：如果您想将它们放在同一行，请尝试这样：

Working DEMO

HTML

<div class="menu">
    <a href="http://google.com"><div class="box">HOME</div></a>
    <a href="http://google.com"><div class="box">HOME</div></a>
</div>
<h1>LEVEL ONE<h1>

CSS

h1 {
    font-family:'Francois One', sans-serif;
    font-size:100px;
    color:#fff;
    text-align:center;
    line-height: 100px;
}
.menu{
    width:auto;
}

如何在同一行上对齐两个对象？

4 个答案: