Question

我无法将图像放在左侧浮动的div中。我尝试过text-align并设置边距。

CSS：

.to_left_690 {
    width: 690px;
    float: left;    
}
.to_left_290 {
    width: 290px;
    float: left;
    overflow: hidden;
    text-align: center;
}
p {
    margin: 0 0 14px 0px;
    text-align: justify;
}
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

HTML：

<div class="to_left_690">

<h3>Date Center</h3>

    <p>One of the biggest` data centers in Latin America with over 3000 servers took a proactive approach to monitor their electrical infrastructure. Over 4 years later they have still not had any major disruptions.</p>

<h3>Call Center</h3>

    <p>
        <img class="alignleft size-full wp-image-181" alt="baloons" src="http://www.sheerdigitaltest.net/janus/wp-content/uploads/2013/07/baloons.png" width="62" height="70">During Carnival 2013 the data center air conditioning failed for a call centre company and no-one on site. Thanks to early detection and alerts sent to the standby maintenance team they were quickly able to resolve the situation and prevent a catastrophic shutdown.</p>

<h3>Facilities Management:</h3>

    <p><span>With over 1200 people working at headquarters the TJES needed a solution to maintain proper working conditions to be able to perform with the minimum of disruption. Janus Technology solutions have eliminated all problems and saved millions in lost productivity over 2 years</span>
    </p>
</div>
<div class="to_left_290">
    <img class="size-full wp-image-183 aligncenter" alt="ipad" src="http://www.sheerdigitaltest.net/janus/wp-content/uploads/2013/07/ipad.png" width="290" height="368">fdsfdsfdsfds</div>

JSFIddle：http://jsfiddle.net/xLwSh/

Answer 1

将此添加到浮动div上的类：

text-align: center;
width: 100%;

它现在不在div的中心，因为~~将divs大小浮动到其内容的宽度~~你在div上设置一个固定的宽度，所以img在你给它的290px中居中，所以div没有占据整个屏幕宽度

Answer 2

将图像设置在另一个div中，并以图像样式使用display:inline。

Answer 3

这是你想要的？ Fiddle

只需添加此CSS规则：

.to_left_290 {
    width: 100%; /* Instead of 290px */
    text-align: center;
}

顺便说一句，你必须在“容器”元素中使用tex-align属性，而不是在子元素中（以下CSS规则不将内部img置于中心位置：

.to_left_290 > img {
   text-align: center;
}

因为您告诉img元素内的中心内容。

Answer 4

如果您的问题是关于图像相对于页面居中。原因是您使用.to_left_290包装div [{1}}。因为图像被包装在已使用width: 290px;固定的容器中，所以您不能指望它在页面中心对齐。包装类需要100％的宽度。

不确定是否需要固定宽度和浮动对齐图像包装，但如果这样做，则无法将图像对齐到页面的中心。如果你可以改变那部分就可以了。

将图像包装器float:left的宽度更改为100％。但是，为浮动div增加100％的宽度消除了浮动div的需要。如果你仍然想让你的div左移并且有固定的宽度，你就不能让它居中。

你唯一能做的就是去除包装div上的固定宽度。像这样：

.to_left_290

工作小提琴：http://jsfiddle.net/gjmvY/1/

居中图像int浮动div

4 个答案: