gpt4 book ai didi

html - 居中图片,但将其保持在左侧 CSS

转载 作者:太空宇宙 更新时间:2023-11-04 12:31:23 25 4
gpt4 key购买 nike

我正在尝试使用 css 将图像放在网页的中央,但仍将其保持在左侧。这意味着图像的右侧“接触”了页面的中心。虽然不是很感人,因为我想要在图像和中心之间留出大约 50px 的空间。这是因为我想在它的右边放一个文本。我一直在尝试使用 CSS 中的以下代码来做到这一点:

.Image1 img {
width: 300px;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
padding-right: 350px;
}

这使得图像正好在我想要的位置。然后我想在该图像旁边放置一大块文本,在图像右侧约 100 像素处,宽度为 300 像素。我不确定该怎么做,有人可以帮助我吗?

最佳答案

因此,您实际上并不想居中图像,而是图像和文本的组合 block 。

创建一个容器来容纳这两个并将其居中..

<div class="group">
<img src="..." />
<div class="text">the text here</div>
</div>

和使用

.group{
width:700px;
overflow:auto;
margin:0 auto;
}
.group > img{float:left;width:300px;}
.group .text{float:right;width:300px;}

演示在 http://jsfiddle.net/gaby/2yL3u57x/1/

关于html - 居中图片,但将其保持在左侧 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27619296/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com