居中图像，但保持在左侧 CSS答案

【问题标题】：Center Image but keep it to the left CSS居中图像，但保持在左侧 CSS
【发布时间】：2015-02-21 12:46:57
【问题描述】：

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

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

这会使图像准确地出现在我想要的位置。然后我想在该图像旁边放一块文本，在它的右侧大约 100 像素，宽度为 300 像素。我不知道该怎么做，有人可以帮我吗？

【问题讨论】：

如果您可以模拟一个图表，将会有很大帮助。这些说明可能会为错误解释留出太多空间
图片可以使用transform:translatex(-50px)

标签： html css layout centering

【解决方案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/的演示

【讨论】：

非常感谢，回答了我的问题。

【解决方案2】：

.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;
}

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

【讨论】：