Question

我正在尝试将图片放到网页的中心，但仍然使用css将其保留在左侧。这意味着图像的右侧“触摸”页面的中心。虽然不完全触动，因为我想在图像和中心之间留出大约50px的空间。这是因为我想把文本放在右边。我一直在尝试使用CSS中的以下代码执行此操作：

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

这使图像完全符合我的要求。然后我想在该图像旁边放一大块文本，右边大约100像素，宽度为300像素。我不知道怎么做，有人能帮助我吗？

Answer 1

因此，您实际上不希望图像居中，而是图像和文本的组合块。

创建一个容器来容纳这两个容器并将其作为中心..

<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/

演示

Answer 2

＆＃13;

.center{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
    width: 200px;
    height: 200px;
}
p{
width:40px;
margin-left: 9px;
float:right;
}

＆＃13;

<div class="center">
<img src="http://upload.wikimedia.org/wikipedia/commons/a/a0/Google_favicon_2012.jpg" />
<p>Lorem ipsum text</p>
</div>

＆＃13;

中心图像，但保持在左侧CSS

2 个答案: