居中图像int浮动div

我不能在div左侧浮动图像居中。我尝试过文本对齐并设置页边距。居中图像int浮动div

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/

来源

2013-07-20 renathy

理论上来说img IS就在中心。 div是290px，img是290px，div浮动到左边。在这种情况下，图像将位于左侧。居中div或给div 100％宽度，然后图像居中。 – Vector

你有答案，你只需要决定是否要固定宽度的浮动div或中心对齐的图像。你只能做到一件事。 – Learner

另一格内设置图像和影像风格使用display:inline。

来源

2013-07-20 18:02:55 Madeyedexter

还有其他解决方案吗？我不想添加一个额外的div。 – renathy

这是你想要的吗？ 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元素里面的内容。

来源

2013-07-20 18:11:35 leoMestizo

我在我的jsfiddle中，它为什么不在那里工作？ – renathy

因为您已将'div.to_left_290'的'width'设置为290px。如果将value属性更改为100％，则div将填充屏幕。 – leoMestizo

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

不知道您是否需要图像包装器的固定宽度和浮动对齐方式，但是如果这样做，则无法将图像对齐页面中心。如果你可以改变那部分，那么你可以做些什么。

将图像包装.to_left_290的宽度更改为100％。但是，向浮动div添加100％宽度消除了浮动div的需要。如果你仍然想让你的div左移并固定宽度，你不能让它居中。

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

.to_left_290 { 
    width: 100%; 
    float: left; 
    overflow: hidden; 
    text-align: center; 
    display:block; 
}

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

来源

2013-07-20 18:14:02 Learner

它添加到一个类上浮动的div：

text-align: center; 
width: 100%;

它不是在div现在定心因为~~浮动的div尺寸的宽度的内容~~你在div上设置了一个固定的宽度，所以img在你给它的290px内居中，所以div不占用整个屏幕宽度

来源

2013-07-20 18:14:49

居中图像int浮动div

回答

相关问题