div中的中心文字左侧是

Question

希望在div的左侧有一个图像（徽标），文本（标题）以div为中心。一个基本问题，但有些警告。

如果我在图像上使用position: absolute，则文本居中，但是当我调整窗口大小时，图像会覆盖文本。希望这是一个响应式页面，其中文本居中，直到它击中图像并且赢得重叠。 https://jsfiddle.net/mwqwmkdm/

如果我在图片上使用float: left，那么文字就不会完全居中。 https://jsfiddle.net/mwqwmkdm/1/

我可以在文字的另一边创建一个相同大小的margin-right，但是我会在较小的显示屏上浪费这些像素而我不想这样做。最终，它将超过我所关注的一条线。 https://jsfiddle.net/mwqwmkdm/2/

基本上，我想：

• 只要屏幕足够宽，文本就会居中
• 当屏幕不够宽时，文字环绕图像并且不在其前面或后面
• 除了图像本身之外不会丢失任何屏幕空间

由于

Answer 1

如果您愿意尝试使用CSS浮动和定位属性的替代方法，则可以使用CSS Flexbox轻松完成任务。代码干净，简单，高效且易于维护。此外，flexbox现在是supported by all major browsers。

DEMO

<强> HTML

<div id="container">
    <img src="http://placehold.it/100x100" width="100" heigth="100">
    <p>centered text</p>
</div>

<强> CSS

#container {
    display: flex;
    border: 2px solid black;
    background-color: aqua;
}

img {
    margin: 10px;
}

p {
    border: 1px dashed red;
    padding: 5px;
    flex-grow: 1;
    text-align: center;
}

<强>更新

这是保持文本以容器的整个宽度为中心的一种方法，同时不允许文本和图像在较小的屏幕上重叠。没有flexbox，没有弃用的标签。只是一个非常简单的媒体查询。

宽屏

缩小屏幕

DEMO

Answer 2

您可以像这样使用flexbox：

.wrapper{
    display: flex;
}
.content{
    flex-grow: 1;
    text-align: center;
}

<div class="wrapper">
    <img src="http://placehold.it/100x100" width="100" heigth="100">
    <div class="content">
        Centered Text
    </div>
</div>

查看此信息以获取更多信息https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background

修改

要将其置于容器的中心，您可以使用float: left修改第二个示例，而是将边距设置为center，您可以将文本放在span中并像这样设置它的右边距：

img {
    float: left;
}

.content {
    text-align: center;    
}
.content span{
    margin-right: 100px;
}

<div>
    <img src="http://placehold.it/100x100" width="100" heigth="100">
    <div class="content">
        <span>Centered Text</span>
    </div>
</div>

Answer 3

Flex box在某些浏览器中存在兼容性问题。只需使用<center></center>为overflow:hidden;创建BFC 看一下这个！ jsfiddle