我的标记看起来像这样
<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,它不会下推内容而是重叠内容。
答案 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。
<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>