1

我无法将图像居中，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/

4

4 回答 4

2

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

text-align: center;
width: 100%;

它现在不在 div 中居中，因为浮动 div 的大小与其内容的宽度相同，您在 div 上设置了固定宽度，因此 img 在您给它的 290px 内居中，因此 div 不会占用整个屏幕宽度

于 2013-07-20T18:14:49.497 回答
0

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

不确定您是否需要图像包装器的固定宽度和浮动对齐，但如果您这样做，那么您不能让图像对齐页面的中心。如果您可以更改该部分，那么您可以执行此操作。

将图像包装的宽度更改.to_left_290为 100%。但是，将 100% 的宽度添加到浮动 div 消除了具有浮动 div 的需要。如果您仍然希望您的 div 向左浮动并具有固定宽度，则不能将其居中。

您唯一能做的就是摆脱包装器 div 上的固定宽度。像这样：

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

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

于 2013-07-20T18:14:02.907 回答
0

这就是你想要的？小提琴

只需添加此 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-20T18:11:35.573 回答
0

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

于 2013-07-20T18:02:55.513 回答