div中的中心文字左侧是

时间:2015-08-18 01:56:42

标签: html css

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

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

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

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

基本上,我想:

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

由于

3 个答案:

答案 0 :(得分: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,没有弃用的标签。只是一个非常简单的媒体查询。

宽屏

enter image description here

缩小屏幕

enter image description here

DEMO

答案 1 :(得分:0)

您可以像这样使用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>

答案 2 :(得分:0)

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