Question

我（希望）尝试将文本水平对齐在两个div框中，但正如您在下面看到的那样，它不会发生在我身上。请帮忙，因为我无法看到我做错了什么

        <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.left-div {
    vertical-align:top;
    float: left;
    width: 400px;
    height: 250px;
        }
.right-div {
    vertical-align:top;
    margin-left: 400px;
  }
</style>
</head>
<body>
<div class="left-div">
<H2> Telephone:</H2>
<strong>Mobile: </strong>     123456789<br />
<strong>Office: </strong>     123456789(answer service)<br />
<strong> Email: </strong><a href="mailto:bg@hotmail.co.uk" style="text-decoration:none;">pgbathrooms@hotmail.co.uk</a>
</div>

<div class="right-div">
<H2>Address:</H2>
house<br />
town<br />
county<br />
</div>
</body>
</html>

Answer 1

这里是working Fiddle

您遇到的问题实际上是margin-collapse problem，这是因为您的h2具有margin-top，而且它反映在一个div而不是另一个div中。

垂直对齐不适用于块级元素，仅适用于内联块或内联元素。

你可以做以下两件事之一：

从h2中删除margin-top：div h2 {margin-top: 0;}
您可以在div的顶部添加填充，以便为＆＃34;推送＆＃34;

按如下方式更改css可解决问题：

.left-div {
    float: left;
    width: 400px;
    height: 250px;
    padding-top: 1px;
}

.right-div {
    margin-left: 400px;
    padding-top: 1px;
}

不能让文本在两个css水平框中对齐

1 个答案: