如何将内容放在浮动元素旁边以及相对于包含元素?

时间:2010-11-18 10:06:25

标签: css css-float center

我的标记看起来像这样

<div>
  <h1 style="text-align:center;" >Heading 1</h1>
  <img style="float:left;" src="logo.gif"/>
  <h1 style="text-align:center;" >Heading 2</h1>
</div>
<div>
  Content goes here
</div>

问题是标题2相对于图像之后的空间的其余部分居中,而不是整个div,因此它不在页面的中心。

如果我使用position:absolute从流中删除img,它不会下推内容而是重叠内容。

5 个答案:

答案 0 :(得分:1)

一种方法是使用徽标的大小向div添加右边距:

<div style="padding-right: 50px;">
  <img style="float:left;" src="logo.gif"/>
  <h1 style="text-align:center;" >Heading</h1>
</div>
<div>
  Content goes here
</div>

另一种方法是从流中删除标题。这仅适用于徽标高度大于航向高度的假设。还要注意图像和标题可能会重叠。

 <h1 style="position: absolute; width: 100%; text-align:center;">
    Heading
</h1>
<img style="float:left;" src="logo.gif"/>
<div style="clear:both;">
  Content goes here
</div>

答案 1 :(得分:1)

通过反复试验解决了这个问题。我不知道为什么,但在我的测试中,只有当宽度设置在12%到80%之间时才有效。

所以似乎“h1”是一个块元素,text-align不是块元素的中心,它只是将内部元素居中,这解释了“居中偏离中心”的行为。所以事实证明答案是“你如何将一个块元素集中在一起?”这个问题的答案相同。

<div>
    <h1 style="text-align:center;">Heading 1</h1>
    <img style="float:left;" src="logo.gif"/>
    <h1 style=" 
             text-align:center;
             margin-left:auto;
             margin-right:auto;
             width:50%;
      ">Heading 2</h1>
</div>
<div style="clear:both;">
  Content goes here
</div>

答案 2 :(得分:1)

我知道我迟到了,但对于未来的读者,我找到了解决这个问题的不同方法。 在flex显示的div容器中使用3个div元素(left div,middle div,right div)。

使左右div具有相同的相对宽度(以%表示)并将每一个浮动到他的一侧。
设置中间div宽度,提醒为100% - (左div +右div)。 将图像定位在左侧div(如果方向为RTL,则为右侧div) 将中间div的文本对齐设置为&#39; center&#39;。 检查这个例子。这里还有Plunker

enter image description here          

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <style>

#editorheader {
  display:flex;
}

#leftheaderdiv {
    float:left;
    width:20%;
    background-color:gray;
    display:inline-block;
}
#middleheaderdiv {
float:left;
    width:60%;
    background-color:red;
    display:inline-block;
    text-align: center;
}

#rightheaderdiv {
    float:right;
    width:20%;
    background-color: gray;
}

    </style>
  </head>

  <body>
   <div class="subheader" id="editorheader">
       <div id="leftheaderdiv"><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d"/></div>
       <div id="middleheaderdiv">I AM IN THE MIDDLE</div>
       <div id="rightheaderdiv"></div>
   </div>

  </body>

</html>

答案 3 :(得分:0)

如果您真的使用徽标图片,那么您可以尝试这个解决方案:

<div> 
  <img style="float:left;" src="logo.jpg"/> 
  <h1 style="text-align:center; position:relative; left:-100px;" >Heading</h1> 
</div>

其中-100px替换为你的一半图像宽度。

修改

来自littlegreen的答案的绝对位置的想法是有效的。检查一下:

<div style="position:relative;"> 
  <img style="float:left; position:absolute;" src="logo.jpg"/> 
  <h1 style="text-align:center;" >Heading</h1> 
</div>

答案 4 :(得分:0)

这个最简单的解决方案:

<h2 style="text-align:center;text-indent:-*px">Heading 2</h2>

  • =徽标宽度