0

您在我之前的消息中误解了我，所以我发布了一个带有示例的新消息。假设您将以下内容浮动，例如左侧的图像和右侧的一些 div，其中包含例如您使用的浏览器和日期+时间以及可能的其他一些内容。

现在，您还想在同一行的这两个浮点数之间显示公司名称。即使您缩小浏览器宽度，中间的公司文本也应始终居中。

在此示例中，我无法将文本置于两个浮点数之间的中心。我将文本放在内联元素还是块元素中都没有关系。我都试过了。在这个例子中，我有 ap 标签。

当您有浮动元素时，使用 text-align:centered 不起作用。

<!DOCTYPE html>
<html>
    <head>
       <meta charset = "utf-8">
       <title></title>
       <style type = "text/css">
           #imageone 
           {
              float:left;
           }
           p#right
           {
              float:right;
           }
           div p
           {
              text-align  : center;
           }
       </style>
    </head>
    <body>
       <div style="background:red">
          <p>My company</p>
          <p id="right">2013-06-12 10:00:12</p>
          <img id="imageone" src="img/die1.png" alt="photo" />
       </div>
    </body>
</html>
4

3 回答 3

3

如果任何两个元素是固定宽度的，这相对简单。您可以通过position: relative在包含元素和position: absolute子元素（要左对齐、右对齐和居中对齐的块）上使用来实现它。

有关示例，请参见此 jsFiddle。

于 2013-09-12T20:49:52.813 回答
1

您可以将您的公司名称放在 html 中的浮动元素之后：

<body>
   <div style="background:red">

      <p id="right">2013-06-12 10:00:12</p>
      <img id="imageone" src="img/die1.png" alt="photo" />
        <p id="name">My company</p>
   </div>
</body>

将边距 0 添加到 p#right 还可以确保它与其他元素垂直居中：

#imageone 
       {
          float:left;
       }
       p#right
       {
          float:right;
            margin: 0;
       }
       div #name
       {
          text-align  : center;

       }

}

在这里看到一个小提琴：http: //jsfiddle.net/WDrVK/1/

于 2013-09-12T20:52:42.563 回答
0

您可以将中心元素设置为margin: 0 auto;吗？

如本例所示：http: //bluerobot.com/web/css/center1.html

于 2013-09-12T20:54:46.097 回答