Question

你在我之前的消息中误解了我，所以我发布了一个新例子。假设你浮动例如左边的图像和右边的一些div，包含你使用的浏览器和日期+时间以及其他一些东西。

现在，您还需要在同一行上显示以这两个浮点数为中心的公司名称。即使您将浏览器宽度设置得更小，公司之间的文本也应始终居中。

在这个例子中，我不能将文本放在两个浮点之间的中心位置。如果我将文本放在内联元素或块元素中并不重要。我试过了两个。在这个例子中，我有一个p标签。

当你有浮动的元素时，使用text-align：居中并不起作用。

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

Answer 1

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

有关示例，请参阅this jsFiddle。

Answer 2

您可以将公司名称放在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>

向p＃right添加边距0也可确保它与其他元素垂直居中显示：

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

       }

}

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

Answer 3

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

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

我想让一个标题集中在同一条线上，两个浮点数从左到右，从一到右

3 个答案: