希望在div的左侧有一个图像(徽标),文本(标题)以div为中心。一个基本问题,但有些警告。
如果我在图像上使用position: absolute
,则文本居中,但是当我调整窗口大小时,图像会覆盖文本。希望这是一个响应式页面,其中文本居中,直到它击中图像并且赢得重叠。 https://jsfiddle.net/mwqwmkdm/
如果我在图片上使用float: left
,那么文字就不会完全居中。 https://jsfiddle.net/mwqwmkdm/1/
我可以在文字的另一边创建一个相同大小的margin-right
,但是我会在较小的显示屏上浪费这些像素而我不想这样做。最终,它将超过我所关注的一条线。 https://jsfiddle.net/mwqwmkdm/2/
基本上,我想:
由于
答案 0 :(得分:1)
如果您愿意尝试使用CSS浮动和定位属性的替代方法,则可以使用CSS Flexbox轻松完成任务。代码干净,简单,高效且易于维护。此外,flexbox现在是supported by all major browsers。
<强> 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,没有弃用的标签。只是一个非常简单的媒体查询。
宽屏
缩小屏幕
答案 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